Android之WebView与原生js之间的相互调用

最新推荐文章于 2024-07-04 17:32:15 发布

上善若水

最新推荐文章于 2024-07-04 17:32:15 发布

阅读量7.1k

点赞数 1

分类专栏： Android基础学习

本文链接：https://blog.csdn.net/btt2013/article/details/51839190

版权

Android基础学习专栏收录该内容

41 篇文章 0 订阅

订阅专栏

工程目录截图：

编写html页面

test.html

<html>
   <meta charset="utf-8"/>
   <title>hehe</title>
   <body>
      <input type="text" id="tx" /><br/>
      <input type="button" id="btn1" value="把文本框中的值toast出来" οnclick="javascript:show()"/><br/>

      <input type="button" id="btn2" value="设置原生文本并回调alert出来一句话" οnclick="javascript:setWithCallback()"/><br/>
   </body>
</html>

在浏览器中的运行效果：

在android客户端编写布局文件

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:id="@+id/id_et_title" />
    <Button
        android:id="@+id/id_btn1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="把上面文本框中文字显示在html的文本框中。"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:id="@+id/id_btn2"
        android:text="我能获取html中文本框里的值，\n设置到上面的文本框中。"/>
    <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/id_webview"/>
</LinearLayout>

展示效果：

MainActivity.java

package com.csii.jn;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity {
    private EditText mEdiTtext;
    private  Button mBtn1;
    private  Button mBtn2;
    private WebView mWebView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化控件
        mEdiTtext = (EditText) findViewById(R.id.id_et_title);
        mBtn1 = (Button) findViewById(R.id.id_btn1);
        mBtn2 = (Button) findViewById(R.id.id_btn2);
        mWebView = (WebView) findViewById(R.id.id_webview);

        //加载资产目录下的html页面
        mWebView.loadUrl("file:///android_asset/test.html");
    }
}

运行在手机上的效果：

开始真正的测试了：

在htm的js中调用java代码中的方法

MainActivity.java

package com.csii.jn;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    private EditText mEdiTtext;
    private  Button mBtn1;
    private  Button mBtn2;
    private WebView mWebView;

    @SuppressLint("JavascriptInterface")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化控件
        mEdiTtext = (EditText) findViewById(R.id.id_et_title);
        mBtn1 = (Button) findViewById(R.id.id_btn1);
        mBtn2 = (Button) findViewById(R.id.id_btn2);
        mWebView = (WebView) findViewById(R.id.id_webview);

        WebSettings settings = mWebView.getSettings();
        //启用js，若值为false，那么html中的js将不可用
        settings.setJavaScriptEnabled(true);
        //不缓存
        settings.setCacheMode(WebSettings.LOAD_NO_CACHE);

        //下面这两个采用默认。如果需要自己对页面响应以及一些浏览器自带方法重写，可以继承WebChromeClient、WebViewClient
        mWebView.setWebViewClient(new WebViewClient());
        mWebView.setWebChromeClient(new WebChromeClient());

        /**
         * 注册JavascriptInterface，其中"DEMO"的名字随便取，如果你用"DEMO"，那么在html中只要用  DEMO.方法名()
         * 即可调用MyJavascriptInterface里的同名方法，参数也要一致
         */
        mWebView.addJavascriptInterface(new MyJavaScriptInterface(),"DEMO");

        //加载资产目录下的html页面
        mWebView.loadUrl("file:///android_asset/test.html");

    }

    /**
     * 自定义JavascriptInterface，只要这个类里面的方法带有@JavaScriptInterface注解，才可以被js调用
     */
    public class MyJavaScriptInterface{
        public MyJavaScriptInterface(){

        }
        @JavascriptInterface
        public void toast(String str){
            Toast.makeText(MainActivity.this,str,Toast.LENGTH_SHORT).show();
        }
    }
}

test.html

<html>
    <meta charset="utf-8"/>
    <title>Test Page</title>
    <body>
        <input type="text" id="tx" /><br/>
        <input type="button" id="btn1" value="把文本框中的值toast出来" οnclick="javascript:show()"/><br/>
        <input type="button" id="btn2" value="设置原生文本并回调alert出来一句话"/><br/>
    </body>
    <script type="text/javascript">
        //直接调用原生方法。公司service.js里的nativeCall的一个参数方法就是这个机制
      function show() {
         var tx = document.getElementById("tx");
         DEMO.toast(tx.value);
      }
    </script>
</html>

运行效果：

其他功能实现，请看代码：

test.html

<html>
   <meta charset="utf-8"/>
   <title>hehe</title>
   <body>
      <input type="text" id="tx" /><br/>
      <input type="button" id="btn1" value="把文本框中的值toast出来" οnclick="javascript:show()"/><br/>

      <input type="button" id="btn2" value="设置原生文本并回调alert出来一句话" οnclick="javascript:setWithCallback()"/><br/>
   </body>
   <script type="text/javascript">
      var callbacks=[];
      var index = 0;

      //直接调用原生方法。公司service.js里的nativeCall的一个参数方法都是这个机制
      function show() {
         var tx = document.getElementById("tx");
         DEMO.toast(tx.value);
      }

      //设置把html页面的数据传递到原生文本框，然后再利用回调获取原生页面的数据，公司service.js里的nativeCall的两个以上参数方法都是这种机制
      function setWithCallback() {
         callbacks[index] = function(data) {
            alert(data);
         };
         var tx = document.getElementById("tx");
         DEMO.setTitleAndCallback(tx.value,index);
      }
      
      function setText (text) {
        var tx = document.getElementById("tx");
        tx.value=text;
      }
      
      function getText () {
        var tx = document.getElementById("tx");
        DEMO.setTitle(tx.value);
      }
   </script>
</html>

MainActivity.java

package com.csii.jn;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements Button.OnClickListener{
    private EditText mEdiTtext;
    private  Button mBtn1;
    private  Button mBtn2;
    private WebView mWebView;

    @SuppressLint("JavascriptInterface")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化控件
        mEdiTtext = (EditText) findViewById(R.id.id_et_title);
        mBtn1 = (Button) findViewById(R.id.id_btn1);
        mBtn2 = (Button) findViewById(R.id.id_btn2);
        mWebView = (WebView) findViewById(R.id.id_webview);
        mBtn1.setOnClickListener(this);
        mBtn2.setOnClickListener(this);

        WebSettings settings = mWebView.getSettings();
        //启用js，若值为false，那么html中的js将不可用
        settings.setJavaScriptEnabled(true);
        //不缓存
        settings.setCacheMode(WebSettings.LOAD_NO_CACHE);

        //下面这两个采用默认。如果需要自己对页面响应以及一些浏览器自带方法重写，可以继承WebChromeClient、WebViewClient
        mWebView.setWebViewClient(new WebViewClient());
        mWebView.setWebChromeClient(new WebChromeClient());

        /**
         * 注册JavascriptInterface，其中"DEMO"的名字随便取，如果你用"DEMO"，那么在html中只要用  DEMO.方法名()
         * 即可调用MyJavascriptInterface里的同名方法，参数也要一致
         */
        mWebView.addJavascriptInterface(new MyJavaScriptInterface(),"DEMO");

        //加载资产目录下的html页面
        mWebView.loadUrl("file:///android_asset/test.html");

    }
    private Handler mHandler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what){
                case 0:
                    mEdiTtext.setText(msg.obj.toString());
                    break;
                case 1:
                    String data = "我会在js的回调中被alert";
                    //js为弱类型语言，传递string型注意加引号
                    mWebView.loadUrl("javascript:callbacks[" + msg.arg1 + "]('" + data + "')");
                    break;
            }
        }
    };

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.id_btn1:
                //调用当前html中的js方法，直接loadUrl("javascript:方法名")即可，可以传递参数，单个，多个参数都可以，这里演示单个参数
                mWebView.loadUrl("javascript:setText('"+mEdiTtext.getText()+"')");
                break;
            case R.id.id_btn2:
                mWebView.loadUrl("javascript:getText()");
                break;
        }
    }

    /**
     * 自定义JavascriptInterface，只要这个类里面的方法带有@JavaScriptInterface注解，才可以被js调用
     */
    public class MyJavaScriptInterface{
        public MyJavaScriptInterface(){

        }
        @JavascriptInterface
        public void toast(String str){
            Toast.makeText(MainActivity.this,str,Toast.LENGTH_SHORT).show();
        }
        //@JavascriptInterface中不能处理和ui有关的东西，所以用handler
        @JavascriptInterface
        public void setTitle(String str){
            Message msg = Message.obtain();
            msg.obj = str;
            msg.what = 0;
            mHandler.sendMessage(msg);
        }
        @JavascriptInterface
        public void setTitleAndCallback(String text,int index){
            Message msg = Message.obtain();
            msg.what=0;
            msg.obj=text;
            //@JavascriptInterface中不能处理和ui有关的东西，所以用handler
            mHandler.sendMessage(msg);
            Message msg2= Message.obtain();
            msg2.what=1;
            msg2.arg1=index;
            mHandler.sendMessage(msg2);
        }
    }
}