Android Webview 注入 JS&CSS答案

【问题标题】：Android Webview Injecting JS&CSSAndroid Webview 注入 JS&CSS
【发布时间】：2013-06-10 00:35:37
【问题描述】：

我正在开发一个供个人使用的简单 rss 阅读器应用程序。这件事是一个完整的黑客，但我只是个人使用它等等。我要解决的问题是，我阅读并为其摄取 rss 提要的网站没有移动界面，并且每个页面都充满了非常重的广告。我想我可以通过一个简单的应用程序来解决其中的一些问题。

当点击应用中的一篇文章时，它会打开页面的 web 视图。广告都是由 JS 在页面加载时加载的，所以我阻止 JS 在我的 webview 中使用，直到调用 onPageFinished 才真正减少了页面加载时间。所以现在这些文章的页面结构永远不会改变，并且有一个节点可以继续我想要的，所以我现在很想加载 JQuery 来拆分 DOM 并制作一个更简单的结构，然后应用我自己的 css 制作它对移动设备更友好。

作为测试，我可以像这样成功加载 JS 并在 webview 中更改页面：

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

效果很好，页面背景变红了。所以现在我正在尝试注入脚本/样式标签，它将 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");

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

任何建议将不胜感激。提前致谢。

【问题讨论】：

This?

标签： javascript android webview

【解决方案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 文件托管在某个地方？

【讨论】：