【Android】webview javascript 注入方法
Android中向webview注入js代码可以通过webview.loadUrl("javascript:xxx")来实现,然后就会执行javascript后面的代码。
但是当需要注入一整个js文件的时候,貌似就有点麻烦了。
不过理清以下思路,方法其实也很简单,如下:
我们通过在webview的onPageFinished方法中执行js代码注入:
第一种:
当webview加载完之后,读取整个js文件中的内容,然后将整个文件内容以字符串的形式,通过webview.loadUrl("javascript:fileContentString")注入
URL url = new URL("http://www.rayray.ray/ray.js"); in = url.openStream(); byte buff[] = new byte[1024]; ByteArrayOutputStream fromFile = new ByteArrayOutputStream(); FileOutputStream out = null; do { int numread = in.read(buff); if (numread <= 0) { break; } fromFile.write(buff, 0, numread); } while (true); String wholeJS = fromFile.toString();
@Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); webview.loadUrl("javascript:" + wholeJS); }
第二种:
页面加载完之后,直接向webview对应的html中加入<script>便签,并包含要注入的js的Url地址,如下:
String js = "var newscript = document.createElement(\"script\");"; js += "newscript.src=\"http://www.123.456/789.js\";"; js += "document.body.appendChild(newscript);";
@Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); webview.loadUrl("javascript:" + js); }
后记:上面两种方式中,第二种方法更加简单方便一点。不过第二种方法也有问题,当你注入完JS之后你想要立即调用其中的方法,第一种方法没问题可以调用到。但是第二种方法中,你要确保注入的<script>便签对应的js文件加载完才可调用成功。
解决:在第二种方法中为加入script标签添加onload事件,确保该script已加载完成。代码可更改如下:
String js = "var newscript = document.createElement(\"script\");"; js += "newscript.src=\"http://www.123.456/789.js\";"; js += "newscript.onload=function(){xxx();};"; //xxx()代表js中某方法 js += "document.body.appendChild(newscript);";
IOS中也一样,按照同样的思路然后在-(void)webViewDidFinishLoad:(UIWebView *)webView 中使用[webView stringByEvaluatingJavaScriptFromString:@"xxx"];即可 。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探