React 原生加载 css 和 js Webview答案

【问题标题】：React native load css and js WebviewReact 原生加载 css 和 js Webview
【发布时间】：2016-01-06 22:51:50
【问题描述】：

我想使用 react native 在 webview 中加载自定义 html，它适用于简单的 html，但我不知道如何将 js 文件中的 javascript 加载到 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>';
});

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

【问题讨论】：

编辑：我已经找到这个链接stackoverflow.com/questions/33818641/…
你把你的myfile.js放在哪里了？
在 Xcode 项目中

标签： webview react-native

【解决方案1】：

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

例如：

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

【讨论】：

如何使用这种方法将 css 加载到 webview 中？
这可能吗？
也许你可以通过 JavaScript 注入 css？

【解决方案2】：

scgough's code 注入 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} />

【讨论】：