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 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 因为Apifox不支持离线,我果断选择了Apipost!
· 通过 API 将Deepseek响应流式内容输出到前端