WebView基础一：Android WebView与JS的交互

最新推荐文章于 2024-07-18 11:07:23 发布

码可菠萝

最新推荐文章于 2024-07-18 11:07:23 发布

阅读量244

点赞数

分类专栏： webview 文章标签： android webview html

本文链接：https://blog.csdn.net/tzl0322/article/details/78127195

版权

webview 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.利用WebView加载html页面

现在，大部分的APP都是采用混合开发，想淘宝京东都可以看到，这也是以后的趋势，所以有必要学习一下。
先从最基本的来，然后在扩展。

布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >
    <WebView 
        android:id="@+id/main_webview"
        android:layout_height="250dp"
        android:layout_width="match_parent"/>
    <LinearLayout 
        android:orientation="horizontal"
        android:layout_marginTop="10dp"
       android:layout_height="wrap_content"
       android:layout_width="match_parent">
        <Button 
        android:id="@+id/main_btone"
        android:text="调用js方法 传递参数"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"/>
    </LinearLayout>

    <TextView 
        android:id="@+id/main_text"
        android:layout_marginTop="10dp"
        android:text="js传过来的参数"
        android:textSize="18sp"
        android:gravity="center"
        android:layout_height="80dp"
        android:layout_width="match_parent"/>

</LinearLayout>

然后是html文件也很简单：

<!DOCTYPE html>
<html>
 <head>
      <meta charset="utf-8">
       <title>Test</title>  
      <script>
         function callAndroid(){
        // 由于对象映射，所以调用test对象等于调用Android映射的对象
            test.hello("js调用了android中的hello方法");
         }
      </script>
      <script>
        //android调用的方法
        function toAndroidOne(a) {
            alert(a)
        }
    </script>
   </head>

<body>
    <button onclick="callAndroid()" type="button">JS调用Android方法</button>
</body>
</html>

初始化WebView：加载本地的html文件（我放在了assets下），直接调用loadUrl方法即可。
如果加载网络连接直接替换即可如：loadUrl(“http://www.baidu.com/“);

private String url="file:///android_asset/html/Test.html";
webView=(WebView) findViewById(R.id.main_webview);
webView.loadUrl(url);

记得添加网络权限：

<uses-permission android:name="android.permission.INTERNET"/>

2.Android 调用JS的代码

首先需要设置支持JS

setting.setJavaScriptEnabled(true);

设置允许JS弹窗

setting.setJavaScriptCanOpenWindowsAutomatically(true);

//添加客户端支持

  webView.setWebChromeClient(new MyWebviewChrome());  
  webView.setWebViewClient(new MyWebviewClient());

暂时先不处理

class MyWebviewClient extends WebViewClient{

    }

    class MyWebviewChrome extends WebChromeClient{

    }

调用JS的代码很简单，在点击事件中

//Android调用JS方法
        bt1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View arg0) {

                webView.loadUrl("javascript:toAndroidOne('"+"我是Android部分"+"')");
            }
        });

点击按钮，可以看到，出现了html的弹窗，值也顺利的传过去了

这里写图片描述

2. JS调用Android的代码

通过JS调用Android 的代码主要是通过WebView的addJavaScriptInterface()来进行关系映射

首先创建一个类，被调用的方法需要使用 @JavascriptInterface注解

class AndroidtoJs extends Object {

        @JavascriptInterface  
        public void hello(String msg) {
            Toast.makeText(MainActivity.this, "js传过来的参数"+msg, Toast.LENGTH_SHORT).show();
            tvContent.setText(msg);
        }
    }

通过webVIew设置Android类和JS代码的映射

webView.addJavascriptInterface(new AndroidtoJs(), "test");

Html部分

   <script>
         function callAndroid(){
        // 由于对象映射，所以调用test对象等于调用Android映射的对象
            test.hello("js调用了android中的hello方法");
         }
      </script>

<button onclick="callAndroid()" type="button">JS调用Android方法</button>

效果图：点击html按钮弹出Toast，得到了JS传过来的参数

这里写图片描述

完整代码：

public class MainActivity extends Activity {
    private WebView webView;
    private Button bt1;
    private TextView tvContent;
    private WebSettings setting;
    private String url="file:///android_asset/html/Test.html";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initData();
        initEvent();
    }

    private void initEvent() {
        //Android调用JS方法
        bt1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View arg0) {

                webView.loadUrl("javascript:toAndroidOne('"+"我是Android部分"+"')");
            }
        });
    }

    private void initData() {
        setting=webView.getSettings();
        //设置支持JS
        setting.setJavaScriptEnabled(true);
        // 设置允许JS弹窗
        setting.setJavaScriptCanOpenWindowsAutomatically(true);
         //添加客户端支持  
        webView.setWebChromeClient(new MyWebviewChrome());  
        webView.setWebViewClient(new MyWebviewClient());
        webView.loadUrl(url);
        webView.addJavascriptInterface(new AndroidtoJs(), "test");
    }

    private void initView() {
        webView=(WebView) findViewById(R.id.main_webview);
        bt1=(Button) findViewById(R.id.main_btone);
        tvContent=(TextView) findViewById(R.id.main_text);
    }

    class MyWebviewClient extends WebViewClient{

    }

    class MyWebviewChrome extends WebChromeClient{

    }

    class AndroidtoJs extends Object {

        @JavascriptInterface  
        public void hello(String msg) {
            Toast.makeText(MainActivity.this, "js传过来的参数"+msg, Toast.LENGTH_SHORT).show();
            tvContent.setText(msg);
        }
    }
}

最基本的JS的相互调用和传参就是这样了

码可菠萝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebView基础一：Android WebView与JS的交互

1.利用WebView加载html页面现在，大部分的APP都是采用混合开发，想淘宝京东都可以看到，这也是以后的趋势，所以有必要学习一下。先从最基本的来，然后在扩展。布局文件：<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android
复制链接

扫一扫