Question

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

点击应用中的文章时，会打开该页面的网页浏览量。广告都是由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。

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

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文件吗？

Android Webview注入JS和CSS

1 个答案: