javascript - Android Webview注入(inject)JS&CSS

Question

我正在开发一个供个人使用的简单 RSS 阅读器应用程序。这东西是一个完整的黑客，但我只是个人使用它，所以无论如何。我试图解决的问题是，我阅读并获取 rss feed 的网站没有移动界面，并且每个页面都充满了非常重的广告。我想我可以通过一个简单的应用程序解决其中的一些问题。

单击应用程序中的文章时，它会打开该页面的 WebView 。所有广告都是由 JS 在页面加载时加载的，因此我阻止在 Web View 中使用 JS，直到调用 onPageFinished 为止，这确实减少了页面加载时间。所以现在这些文章的页面结构永远不会改变，并且有一个节点完全按照我想要的方式继续，所以我很乐意在此时加载 JQuery 来分解 DOM 并制作一个更简单的结构，然后应用我自己的 css 使其成为可能更适合移动设备。

作为测试，我可以成功加载 JS 并更改 webview 中的页面，如下所示:

view.loadUrl("javascript:(function() { " +  
                "document.body.style.background = 'red'; " +  
                "})()")

效果很好，页面背景变成红色。所以现在我正在尝试注入(inject)脚本/样式标签，将 src 值指向本地文件。我不太确定如何在这里创建相对文件路径，所以也许这就是问题所在。我尝试过这样的事情:

view.loadUrl("javascript:(function() { " +  
                "var head= document.getElementsByTagName('head')[0]"+
                "var script= document.createElement('script');" +
                "script.type= 'text/javascript';" +
                "script.src= '/android_asset/js/articleSetup.js';"+
                "head.appendChild(script); "+
                "})()");

我可以在 WebView 中打开同一个文件，如下所示:

view.loadUrl("file:///android_asset/js/articleSetup.js");

但我需要的是不加载新文件，而是将其注入(inject)到 webview 中，以便我可以操作 DOM。

如有任何建议，我们将不胜感激。提前致谢。

Answer 1

我认为最好的答案是创建一个像这样的脚本标签:

var script = document.createElement('script');
script.setAttribute('src', 'file:///android_asset/js/articleSetup.js');
script.setAttribute('type', 'text/javascript');
document.body.appendChild(script);

所以也许你可以做类似的事情

view.loadUrl("var script = document.createElement('script');script.setAttribute('src', 'file:///android_asset/js/articleSetup.js'); script.setAttribute('type', 'text/javascript'); document.body.appendChild(script);");

虽然我不太确定是否将 JS 文件从本地文件系统加载到网页上，但也许您可以将 JS 文件托管在某处？