Android之WebView与原生js之间的相互调用
16lz
2021-01-24
工程目录截图:
编写html页面
test.html
charset="utf-8"/> hehe 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" />
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"/> Test Page type="text" id="tx" />
type="button" id="btn1" value="把文本框中的值toast出来" οnclick="javascript:show()"/>
type="button" id="btn2" value="设置原生文本并回调alert出来一句话"/>
运行效果: 其他功能实现,请看代码:
test.html
charset="utf-8"/> hehe 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); } }}运行效果:
更多相关文章
- android 自定义进度条下载apk并更新
- Android(安卓)jni 编程(参数的传递,成员,方法的)相互访问
- android 关于资源找不到的问题
- Android(安卓)获取View高度的4种方法
- android 开发 onRestart()未调用
- 如何构建背景渐变的页面
- 大话企业级Android应用开发实战 用户界面