React Native加载CSS和JS Webview。

Question

React Native加载CSS和JS Webview。

4

我希望能够在使用React Native的Webview中加载自定义的HTML。对于简单的HTML，它可以正常工作，但是我无法弄清楚如何将JS文件中的JavaScript加载到Webview中，似乎什么也没有发生。

这是我的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} />
    );

这里有一个简单的JS文件（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>';
});

我在我的网页浏览器中尝试了它，它可以工作。

- fandro

编辑：我已经找到了这个链接https://dev59.com/-JHea4cB1Zd3GeqPm0b5 - fandro

2

你把 myfile.js 文件放在哪里了？ - dbanck

在Xcode项目中 - fandro

2个回答

1

scgough的代码注入了JS；以下是如何使用JavaScript也注入CSS：

<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} />

- Kh An

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- scgough · Accepted Answer

您需要使用WebView上的injectedJavaScript属性来传递要执行的JS。

例如：

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