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

工程目录截图：

编写html页面

test.html

   charset="utf-8"/>   </span>hehe<span style="color:#e8bf6a;">         type="text" id="tx" />
      type="button" id="btn1" value="把文本框中的值toast出来" οnclick="javascript:show()"/>
      type="button" id="btn2" value="设置原生文本并回调alert出来一句话" οnclick="javascript:setWithCallback()"/>

在浏览器中的运行效果：

在android客户端编写布局文件

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">            android:layout_width="match_parent"        android:layout_height="50dp"        android:id="@+id/id_et_title" />            android:id="@+id/id_btn1"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="把上面文本框中文字显示在html的文本框中。"/>            android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="center"        android:id="@+id/id_btn2"        android:text="我能获取html中文本框里的值，\n设置到上面的文本框中。"/>            android:layout_width="match_parent"        android:layout_height="match_parent"        android:id="@+id/id_webview"/>

展示效果：

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

    charset="utf-8"/>    </span>Test Page<span style="color:#e8bf6a;">            type="text" id="tx" />
        type="button" id="btn1" value="把文本框中的值toast出来" οnclick="javascript:show()"/>
        type="button" id="btn2" value="设置原生文本并回调alert出来一句话"/>

运行效果：

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

test.html

   charset="utf-8"/>   </span>hehe<span style="color:#e8bf6a;">         type="text" id="tx" />
      type="button" id="btn1" value="把文本框中的值toast出来" οnclick="javascript:show()"/>
      type="button" id="btn2" value="设置原生文本并回调alert出来一句话" οnclick="javascript:setWithCallback()"/>

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);        }    }}

运行效果：

更多相关文章

随机推荐