Android 中WebView与JS交互

最新推荐文章于 2023-10-26 07:30:00 发布

yuminfeng728

最新推荐文章于 2023-10-26 07:30:00 发布

阅读量346

点赞数

分类专栏： Android UI开发文章标签： android html webview

本文链接：https://blog.csdn.net/yuminfeng728/article/details/52149370

版权

Android UI开发专栏收录该内容

29 篇文章 0 订阅

订阅专栏

最近在项目中应用到了WebView与JS互相调用的知识点，涉及到JS中调用Android本地的方法，在这里使用一个小Demo来实现WebView和JS的相互调用。

1.编写一个测试html文件

写好html文件后，再把该文件放在Android工程中的assets目录下；

<!DOCTYPE html>
<html>
    <head>
        <meta chatset="utf-8" />
        <title>This is a test</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            a{
                display: block;
                width: 100px;
                padding: 1em;
                margin: 0 auto;
                font-size: 1em;
                color: #FFF;
                background-color: highlight;
                text-decoration: none;
            }
        </style>
    </head>

    <body>
        <a>js中调用本地方法</a>
        <script>
            function funFromjs(){
                document.getElementById("helloweb").innerHTML="HelloWebView,i'm from js";
            }
            var aTag = document.getElementsByTagName('a')[0];
            aTag.addEventListener('click', function(){

                //调用android本地方法
                JavaScript:Android_JSObj.funFromAndroid("调用android本地方法fun1FromAndroid(String name)！！");
                return false;
            }, false);
        </script>
        <p></p>
        <div id="helloweb"> 
        </div>
    </body>
</html>

2.实现Android中与js的交互

布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".Main" >

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="android中调用js中方法" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="20dip"
        android:background="@drawable/bg_chat_default0"
        android:orientation="vertical" >

        <WebView
            android:id="@+id/wv_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="20dp" />
    </LinearLayout>

</LinearLayout>

Activity的代码

package com.xuzh.demowebviewjs;
import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.view.View;
import android.webkit.WebView;
import android.widget.Button;

public class MainActivity extends Activity {

    private Button mButton;
    private WebView mWebView;

    @SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mButton = (Button) findViewById(R.id.button);
        mWebView = (WebView) findViewById(R.id.wv_view);

        // 设置编码
        mWebView.getSettings().setDefaultTextEncodingName("utf-8");
        // 支持js
        mWebView.getSettings().setJavaScriptEnabled(true);
        // 设置本地调用对象及其接口
        mWebView.addJavascriptInterface(new JavaScriptObject(this), "Android_JSObj");
        // 载入本地的html文件
        mWebView.loadUrl("file:///android_asset/webViewtest.html");

        // 点击调用js中方法
        mButton.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                mWebView.loadUrl("javascript:funFromjs()");
            }
        });
    }
}

如上所示，初始化WebView后，需要设置它的重要属性，如：

setJavaScriptEnabled(true)：为了让WebView支持JS功能；
mWebView.addJavascriptInterface(new JavaScriptObject(this), “Android_JSObj”)：给WebView中注入一个JS对象，该对象提供JS操作本地Android方法的接口，能够接收JS传递的参数，第二个参数表示对象名称，用于JS中的识别。

JavaScriptObject对象中代码：

package com.xuzh.demowebviewjs;
import android.content.Context;
import android.webkit.JavascriptInterface;
import android.widget.Toast;

public class JavaScriptObject {

    Context mContxt;
    public JavaScriptObject(Context mContxt) {
        this.mContxt = mContxt;
    }
    @JavascriptInterface
    public void funFromAndroid(String name) {
        Toast.makeText(mContxt, name, Toast.LENGTH_LONG).show();
    }
}