Android在webview中实现js交互



在webview中实现js交互，常见的即点击事件的处理。当点击webview加载的网页中的某个按钮或图片，调用java代码做出相应处理如跳转到app中的某个页面。此外还可以在跳转页面时从网页获取数据传递参数到新页面。

如图所示，此页为webview加载的网页，点击网页中的头像和进入直播按钮都进入到该新闻主播的直播间页面，html网页中将头像作为图片img标签处理，将按钮作为span标签处理。

 

具体实现如下：

在activiy中：

private WebViewweb;

private WebSettingss;

@Override

publicvoid initView() {

   web = (WebView)headView.findViewById(R.id. web);

   url = "www.xxxxxxxx.com";

 

   // JS交互

   s = web.getSettings();

   s.setBuiltInZoomControls(true);

   s.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);

   s.setUseWideViewPort(true);

   s.setLoadWithOverviewMode(true);

   s.setSavePassword(true);

   s.setSaveFormData(true);

   s.setJavaScriptEnabled(true);

   s.setDefaultTextEncodingName("utf-8");

   s.setTextSize(TextSize.NORMAL);

   web.loadUrl(url);

 

   //添加js交互接口类，并起别名

   web.addJavascriptInterface(newJavascriptInterface(this),

             "imagelistner");

   web.addJavascriptInterface(newJavascriptInterface(this),

             "imagelistner1");

   web.setWebViewClient(newMyWebViewClient());

}

 

   //webview监听

   privateclassMyWebViewClientextends WebViewClient {

 

   @Override

   publicbooleanshouldOverrideUrlLoading(WebView view, String url) {

 

      returnsuper.shouldOverrideUrlLoading(view, url);

   }

 

   @Override

   publicvoid onPageFinished(WebView view, String url) {

      view.getSettings().setJavaScriptEnabled(true);

      super.onPageFinished(view, url);

      //html加载完成之后，添加监听头像和监听按钮的的点击js函数

      addImageClickListner();

      addStockClickListner1();

      }

 

      @Override

      publicvoid onPageStarted(WebView view, String url,Bitmap favicon) {

          view.getSettings().setJavaScriptEnabled(true);

 

          super.onPageStarted(view,url, favicon);

          progressDialog.show();

      }

 

      @Override

      publicvoid onReceivedError(WebView view,int errorCode,

             String description,String failingUrl) {

 

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

 

      }

   }

 

/**

 *js注册

 */

privatevoidaddImageClickListner() {

//遍历所有的img节点，并添加onclick函数，在函数执行的时候调用本地接口传递并传递获取到的hostid

host_tie_web.loadUrl("javascript:(function(){"

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

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

                    + "{"

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

                    + "   {  "

                    + "       window.imagelistner.openImage(this.src,this.getAttribute('hostid')); "

                    + "   }  " +"}" +"})()");

}

 

privatevoidaddStockClickListner1() {

//遍历所有的span节点，并添加onclick函数，在函数执行的时候调用本地接口传递获取到的id

host_tie_web.loadUrl("javascript:(function(){"

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

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

                    + "{"

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

                    + "   {  "

                   + "       window.imagelistner1.openImage(this.src,this.getAttribute('id')); "

                    + "   }  " +"}" +"})()");

}

 

//js通信接口

publicclassJavascriptInterface {

   private Contextcontext;

   public JavascriptInterface(Context context) {

      this.context = context;

   }

   publicvoidopenImage(String img,String id) {

      Intent intent = new Intent();

      intent.putExtra("id", id);//不需要传递参数的则直接设置页面跳转。

      intent.setClass(context, HostRoomActivity.class);

      context.startActivity(intent);

   }

}

tip:页面中有多个交互时，可以创建多个交互接口类，并起别名。html加载完成之后，添加不同的监js函数，在交互函数中用对应的别名调用通信接口中对应的方法。