Android WebView与JavaScript代码交互

Android WebView与JavaScript代码交互

1. 首先先准备一段网页代码

  String DATA = "<p>    为加快推进2017年度自治区水土保持重点工程前期工作，按照水利厅《关于做好2017年度水土保持重点工程项目前期工作的通知》要求，2017年4月27日，水利厅水保处一行三人在赵宏新副处长的带领下。对昌吉州2017年度水土保持重点工程前期工作开展情况进行了监督检查。 <br>\n"      + "    首先，检查组一行对玛纳斯县旱卡子滩哈萨克乡闽玛生态村进行了实地调研，该村是全疆第一个以“绿色、生态、宜居”为设计理念而高标准建设的牧民定居工程，工程建设与当地自然景观相协调，基本实现人与自然的和谐共处，经济社会的可持续发展，生态环境的良性循环。“十二五”期间，水利厅在该区域已安排了两期水土保持综合治理工程建设，治理水土流失面积14平方公里，蓄水保土效益、生态效益和社会效益显著。 <br>\n"      + "    随后，检查组对拟选定列入2017年水土保持重点工程建设计划中的玛纳斯县沙河小流域水土保持综合治理工程项目区进行了现场查看，详细了解了项目实施方案的编报、审查和审批工作情况，及项目区选址、建设规模及投资等情况，实施方案编制单位项目负责人员在现场详细介绍了工程实施方案的设计情况，听取了昌吉州水利局和玛纳斯县水利局有关负责同志对实施方案设计总体思路、治理措施布设、及如何将水土保持重点治理项目与闽玛生态村周边生态建设工程项结合的介绍后，检查组认为，玛纳斯县沙河小流域水土保持综合治理工程项目区选址合理可行，与前两期已实施的项目结合并集中连片实施，符合水土保持综合治理的要求。 <br>\n"      + "    现场检查后，检查组一行与昌吉州水利局、玛纳斯县水利局的有关领导及项目实施方案设计单位的设计人员进行了座谈，在结合了闽玛生态村规划和建设的经验后一致认为：水土保持综合治理工程是社会经济发展的要求，是落实习近平总书记系列讲话中“宁要绿水青山，不要金山银山”重要思想的重要举措，前期工作尤为重要，一是要按照“统一规划、分步实施、稳步推进”的原则和构建“生态修复、生态治理、生态保护”三道水土保持防线的思路进行建设；二是要将人与自然和谐相处的理念、以人为本的理念、可持续发展的理念以及保护自然生态等新理念贯穿进水土保持综合治理工程中，使水土保持工作突出生态优先，治理措施与自然景观相协调；三是要加大水土保持宣传力度，让水土保持走进千家万户、走进学校课堂，让越来越多的人了解水土保持工作，逐渐增强水土生态保护意识；四是要在管理上层层落实责任主体，严格按照水土保持重点工程建设管理程序要求做好洋沙小流域水土保持综合治理工程建设，同时，要加强与相关部门的配合和沟通，使各方面的资金捆绑使用，突显规模效益。</p>\n"      + "<p> <br>\n"      + "<img style=\"WIDTH: 263px; HEIGHT: 156px\" border=\"0\" width=\"675\" height=\"472\" src=\"http://www.xjslt.gov.cn/static/ewebeditor/uploadfile/img3/20170505130428623001.jpg\">   <img style=\"WIDTH: 256px; HEIGHT: 159px\" border=\"0\" width=\"775\" height=\"745\" src=\"http://www.xjslt.gov.cn/static/ewebeditor/uploadfile/img3/20170505130451341001.jpg\">  <img style=\"WIDTH: 216px; HEIGHT: 158px\" border=\"0\" width=\"711\" height=\"676\" src=\"http://www.xjslt.gov.cn/static/ewebeditor/uploadfile/img3/20170505130538948001.jpg\"><br>\n"      + "<br>\n"      + "<br>\n"      + "</p>";

2. 创建工程，并在布局文件设置WebView以及在显示的Activity完成findViewById()操作。

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.mazaiting.webviewtest.MainActivity"    >  <WebView      android:id="@+id/webView"      android:layout_width="wrap_content"      android:layout_height="wrap_content"      /></RelativeLayout>

  @Override protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    WebView webView = (WebView) findViewById(R.id.webView);  }

3. 加载网页,执行这段代码时，要添加网络权限，因为数据中含有网络图片。

webView.loadData(DATA,"text/html;charset=UTF-8", "UTF-8");

4. 设置WebView与JavaScript交互,创建一个类，类中创建一个方法，并添加@JavascriptInterface注解。

  public class JavaScriptInterface{    @JavascriptInterface    public void openImage(String path){ // 获取到图片链接，函数内执行自己的想要执行的逻辑      Toast.makeText(MainActivity.this, path, Toast.LENGTH_SHORT).show();    }  }

5. WebView图片点击代码配置

    final WebView webView = (WebView) findViewById(R.id.webView);    /**     * 处理将Html中的网页图片点击     */    // 1. 获取WebView的设置对象    WebSettings settings = webView.getSettings();    settings.setJavaScriptEnabled(true);    // 3. 设置允许JavaScript弹窗    settings.setJavaScriptCanOpenWindowsAutomatically(true);    // 4. 防止中文乱码    settings.setDefaultTextEncodingName("UTF-8");    // 5. 加载网页    webView.loadData(DATA,"text/html;charset=UTF-8", "UTF-8");    // 6. 载入JavaScript    webView.addJavascriptInterface(new JavaScriptInterface(), "imageListener");    // 7. 设置WebView客户端    webView.setWebViewClient(new WebViewClient(){      /**页面加载完成*/      @Override public void onPageFinished(WebView view, String url) {        super.onPageFinished(view, url);        // 这段JavaScript函数的功能就是注册监听，遍历所有的img标签，并添加        // onClick函数，函数的功能是在图片点击的时候调用本地Java接口并传递url过去        webView.loadUrl("javascript:(function(){" +            "var obj = document.getElementsByTagName(\"img\");" +            "for(var i=0;i<obj.length;i++){" +            "obj[i].onclick=function(){" +            "window.imageListener.openImage(this.src)}" +            "}" +            "})()");      }    });

代码下载