React native load css and js Webview

Question

I want to load custom html in a webview using react native, it's working for simple html but I can't figure out how to load javascript from a js file to the webview, it looks like nothing happen.

Here is my webview :

 var html = '<!DOCTYPE html><html><head><script src="myfile.js" type="text/javascript"></script></head><body><h1>This is a heading!</h1><div id="here"></div></body></html>';

    return (
      <WebView html={html}
               javaScriptEnabled={true} />
    );

And here I have my simple js file (myfile.js):

document.addEventListener("DOMContentLoaded", function(event) {
   alert("HERE");
   var generateHere = document.getElementById("here");
generateHere.innerHTML = '<div class="someclass"><a href="www.example.com"><p>some text</p></a></div>';
});

I tried it in my web browsers it works.

Edit : I already find this link stackoverflow.com/questions/33818641/… — fandro
– fandro, Commented Jan 6, 2016 at 22:52

scgough · Accepted Answer · 2016-01-07 16:11:23Z

2

You need to use the injectedJavaScript attribute on the WebView to pass over JS to be executed.

For example:

<WebView html={html}
    injectedJavaScript={'function myfunc() { //your JS here };myfunc();'}
    javaScriptEnabled={true} />

answered Jan 7, 2016 at 16:11

scgough

5,2723 gold badges33 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rias Over a year ago

How is it possible to load css into the webview with this method?

Taylor A. Leach Over a year ago

Is this possible?

scgough Over a year ago

Maybe you could inject css via JavaScript?

Adrian Mole · Accepted Answer · 2021-09-23 17:21:12Z

1

scgough's code injects JS; here is how you can also inject CSS with JavaScript:

<WebView html={html}
    injectedJavaScript={`let customCSS = "body { font-weight: 'bold'; font-size: '17px'; }"//your CSS
    let headTag = document.getElementsByTagName('head')[0];
    let styleTag = document.createElement('style')
    headTag.appendChild(styleTag);
    styleTag.type = 'text/css';
    styleTag.appendChild(document.createTextNode(customCSS));`}
    javaScriptEnabled={true} />

edited Sep 23, 2021 at 17:21

Adrian Mole

52.1k193 gold badges61 silver badges101 bronze badges

answered Sep 23, 2021 at 14:35

Fish

5716 silver badges14 bronze badges

Collectives™ on Stack Overflow

React native load css and js Webview

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related