Android原生WebView与网页js相互调用

来源：互联网发布：access数据库表的关联编辑：程序博客网时间：2024/06/06 09:39

随着手机网络的升级，越来越多的开发者在一些页面使用网页来代替Adroid原生页面。这就需要Android和Js之间相互传递参数相互调用方法。今天就来带大家实现Android与Js的互调。

先来看运行图：

代码MainActivity.java

public class MainActivity extends Activity {    private WebView webView;    private EditText editText;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        webView = (WebView) findViewById(R.id.webView);        editText = (EditText) findViewById(R.id.editText);        initWebView();    }    // 初始化WebView    private void initWebView() {        // 不跳转到其他浏览器        webView.setWebViewClient(new WebViewClient() {            @Override            public boolean shouldOverrideUrlLoading(WebView view, String url) {                view.loadUrl(url);                return true;            }        });        WebSettings settings = webView.getSettings();        // 设置支持Js        settings.setJavaScriptEnabled(true);        // 加载本地html文件        webView.loadUrl("file:///android_asset/JsMutualAndroid.html");        webView.addJavascriptInterface(new JSInterface(), "havorld");    }    // 按钮的点击事件    public void click(View view) {        // javascript:javaCallJs('内容')        String str = "javascript:androidCallJs(" + "'"+ editText.getText().toString() + "'" + ")";        // java调用JS方法        webView.loadUrl(str);    }    private class JSInterface {        // JS需要调用的方法， 在API 17之前有一些漏洞，所以在API 17以后，需要在JavaScript接口类的方法加上@JavascriptInterface注解        @JavascriptInterface        public void jsCallAndroid(String str) {            Toast.makeText(SecondActivity.this, str, Toast.LENGTH_SHORT).show();        }    }}

布局activity_main.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/ll_root"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context=".MainActivity" >    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="#FFFEA2"        android:padding="10dp"        android:text="Android原生"        android:textSize="16sp" />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="#FFFEA2"        android:orientation="vertical"        android:padding="10dp" >        <EditText            android:id="@+id/editText"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:gravity="center"            android:hint="请输入传入Js的内容"            android:textSize="16sp" >            <requestFocus />        </EditText>        <Button            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:onClick="click"            android:text="向WebView传入内容"            android:textSize="16sp" />    </LinearLayout>    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="50dp"        android:background="#FF80C0"        android:padding="10dp"        android:text="WebView"        android:textSize="16sp" />    <WebView        android:id="@+id/webView"        android:layout_width="match_parent"        android:layout_height="wrap_content" /></LinearLayout>

在Android的assets目录下放置JsMutualAndroid.html文件

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><meta name="viewport"    content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><script type="text/javascript">    function androidCallJs(str) {        document.getElementById("content").innerHTML = ("您输入了：" + str);    }</script><style type="text/css">body {    background-color: #FF80C0;    padding: 10px;    font-size: 16px;}#content {    text-align: center;}.btn {    display: block;    width: 100%;    margin-top: 10px;    font-size: 16px;    padding: 5px 0;}</style></head><body>    <div id="content"></div>    <input class="btn" type="button" value="点击Js调用Android"        onclick="window.havorld.jsCallAndroid('我来自Js调用')" /></body></html></html>

OK，这样就可以了，有没有一种so easy的赶脚。

点击下载源码

0 0