android 注入js的基本使用

public class MainActivity extends Activity {

private WebView contentWebView = null;

@SuppressLint("SetJavaScriptEnabled")
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
contentWebView = (WebView) findViewById(R.id.webview);
// 启用javascript
contentWebView.getSettings().setJavaScriptEnabled(true);
// 随便找了个带图片的网站
contentWebView.loadUrl("http://www.baidu.com");
// 添加js交互接口类，并起别名 imagelistner
contentWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");
contentWebView.setWebViewClient(new MyWebViewClient());

}

// 注入js函数监听
private void addImageClickListner() {
// 这段js函数的功能就是，遍历所有的img几点，并添加onclick函数，在还是执行的时候调用本地接口传递url过去
//Old代码，可以进入视频页面后自动播放视频
 contentWebView.loadUrl("javascript:(function(){" + 

             "var objs = document.getElementsByTagName(\"img\"); " +  

                     "for(var i=0;i<objs.length;i++)  " +  

             "{" 

//                      +"objs[i].play();"+

                     + "    objs[i].onclick=function()  " +  

             "    {  "  

                     + "        window.imagelistner.openImage(this.src);  " +  

             "    }  " +  

             "}" +  

             "})()"); 
 //New 成功调用视频监听视频状态

//  contentWebView.loadUrl("javascript:(function(){" + 

//      
       "var objs = document.getElementsByTagName(\"video\"); " +  

//      
               "for(var i=0;i<objs.length;i++)  " +  

//      
       "{" 

//      
        +"objs[i].addEventListener(\"playing\", function() {"

////      
        +" objs[i].webkitEnterFullscreen();"

// + "        window.imagelistner.openImage(this.src);  " 

//      
     +"}, false);"

//      
     +"}" +  

//      
       "})()"); 
}

// String js = "javascript:";

//    js += "var _ytrp_html5_video_last;";

//    js += "var _ytrp_html5_video = document.getElementsByTagName('video')[0];";

//    js += "if (_ytrp_html5_video != undefined && _ytrp_html5_video != _ytrp_html5_video_last) {";

//    {

//        js += "_ytrp_html5_video_last = _ytrp_html5_video;";

//        js += "function _ytrp_html5_video_ended() {";

//        {

//            js += "_VideoEnabledWebView.notifyVideoEnd();";

//        }

//        js += "}";

//        js += "_ytrp_html5_video.addEventListener('ended', _ytrp_html5_video_ended);";

//    }

//    js += "}";
// js通信接口
public class JavascriptInterface {

private Context context;

public JavascriptInterface(Context context) {
this.context = context;
}

public void openImage(String img) {
System.out.println(img);
Log.e("zhuwei", img);
}
}

// 监听
private class MyWebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {

return super.shouldOverrideUrlLoading(view, url);
}

@Override
public void onPageFinished(WebView view, String url) {

view.getSettings().setJavaScriptEnabled(true);

super.onPageFinished(view, url);
// html加载完成之后，添加监听图片的点击js函数
addImageClickListner();

}

@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
view.getSettings().setJavaScriptEnabled(true);

super.onPageStarted(view, url, favicon);
}

@Override
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {

super.onReceivedError(view, errorCode, description, failingUrl);

}
}

}

在进行webview调用视频全屏事件的时候发现有很多问题，例如网上资料所说的webchromeclient的onshowcustomview和onhidecustomview在android4.0还是4.4以上使用的时候似乎已经不会被调用。如果要处理视频全屏的事件则必须捕捉到合适进行了视频播放事件，然后使用函数回调进行自己的处理。在webview的使用和开发过程中有很多问题系统并没有提供处理方法，此时，js注入无疑是一种解法。在学习过程中也了解到了js的强大之处，当初在学校觉得这语言没什么好学的，现在发现自己当时确实见识浅陋了。

网上所说的浏览器夜间模式和视频播放的事件都是需要用到js注入来支持的。比如猎豹浏览器。过程中主要集中处理几个问题。

1.为什么需要使用Js注入，注入js作用是什么，需要做那些修改。

js注入可以在页面加载完毕之后对加载的页面做处理，而android 本身并没有提供给我们解决的方式。调用js进行样式修改和事件监听都是不错的选择。

2.使用过程中遇到的困难

在整个调用过程中，对于js语法和使用相当不熟悉，导致耗费时间较多，且思路不清晰。通过咨询前端缩小了自己无厘头的看代码研究的时间，多咨询比自己熟悉相应模块的人显然是一件很有效率的事情。另外，查找问题要仔细，相同代码demo可以执行，自己却一直执行不了，问题出在sdk版本上，大于17版本回调js事件需要使用js注解，写在调用之前并引用完整的路径，android.webkit.javascriptInterface排除错误需要耗费时间，要仔细排查。