码迷,mamicode.com
首页 > 编程语言 > 详细

webview javascript 注入方法

时间:2014-11-03 11:25:46      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:android   style   blog   http   io   color   ar   os   使用   

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"];即可 。

 

本文转自:http://www.cnblogs.com/rayray/p/3680500.html

webview javascript 注入方法

标签:android   style   blog   http   io   color   ar   os   使用   

原文地址:http://www.cnblogs.com/sishuiliuyun/p/4070726.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!