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