Android与js交互

来源：互联网发布：热力地图制作软件编辑：程序博客网时间：2024/05/07 00:28

在混合开发中，我们的webView不仅仅是用来展示网页，还可能需要跟网页进行交互，这么一来就需要android调用网页中的js方法或者js调android本地的方法。

对webview使用还不熟悉的同学可以先看看这个篇博客webView的简单使用

Android调用网页中的js方法步骤
1.首先是基本的设置

        webView = (WebView) findViewById(R.id.webView);        webView.setWebViewClient(new WebViewClient());        webView.setWebChromeClient(new WebChromeClient());        /*设置webview支持javascript脚本*/        webView.getSettings().setJavaScriptEnabled(true;

2.在网页中创建要被调用的方法

            <script>            /*普通方法*/            function showDialog() {                alert("hello Android");            }            /*有参数的方法*/            function showDialog1(content) {                alert(content);            }            </script>

3.通过 webView.loadUrl(“javascript:methodName()”);调用

 webView.loadUrl("javascript:showDialog()");//无参方法 webView.loadUrl("javascript:showDialog1('yzq')");//有参方法

Js调Android本地方法

1.首先是基本的设置

        webView = (WebView) findViewById(R.id.webView);        webView.setWebViewClient(new WebViewClient());        webView.setWebChromeClient(new WebChromeClient());        /*设置webview支持javascript脚本*/        webView.getSettings().setJavaScriptEnabled(true;

2.给js提供本地方法

    /*定义本地方法*/    private class JsToJava {         @JavascriptInterface        public void nativeMethod() {            Toast.makeText(MainActivity.this, "Android本地方法", Toast.LENGTH_LONG).show();        }    }

3.给webview添加js接口拱js调用

/*定义接口  将JsToJava作为接口添加至webview，并起一个别名为android*/webView.addJavascriptInterface(new JsToJava(), "android");

4.在js中通过window.别名.方法名调用

window.android.nativeMethod();

整体代码：

HTML代码

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style>            h1{                margin: auto;            }            button {                height: 45px;                line-height: 45px;                color: red;                font-weight: bold;                background: white;                border: 1px solid blue;                margin: auto;            }        </style>        <script>            /*普通方法*/            function showDialog() {                alert("hello Android");            }            /*有参数的方法*/            function showDialog1(content) {                alert(content);            }            /*js传递数据给Android*/            function setData() {                var result = "我是js返回的数据"                window.android.getData(result);            }            window.onload = function() {                document.querySelector("button").onclick = function() {                    window.android.nativeMethod();                }            }        </script>    </head>    <body>        <h1>我是网页</h1>        <button>        调用Android中的方法    </button>    </body></html>

Android布局：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="com.yzq.hybrid.MainActivity">    <Button        android:id="@+id/btn1"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="调普通方法" />    <Button        android:id="@+id/btn2"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="调有参方法" />    <Button        android:id="@+id/btn3"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="js给Android传递数据" />    <WebView        android:id="@+id/webView"        android:layout_width="match_parent"        android:layout_height="match_parent">    </WebView></LinearLayout>

Android代码：

package com.yzq.hybrid;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.webkit.JavascriptInterface;import android.webkit.WebChromeClient;import android.webkit.WebView;import android.webkit.WebViewClient;import android.widget.Button;import android.widget.Toast;public class MainActivity extends AppCompatActivity {    private Button btn1, btn2, btn3;    private WebView webView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        btn1 = (Button) findViewById(R.id.btn1);        btn2 = (Button) findViewById(R.id.btn2);        btn3 = (Button) findViewById(R.id.btn3);        webView = (WebView) findViewById(R.id.webView);        webView.setWebViewClient(new WebViewClient());        webView.setWebChromeClient(new WebChromeClient());        /*设置webview支持javascript脚本*/        webView.getSettings().setJavaScriptEnabled(true);        /*定义接口  将JsToJava作为接口添加至webview，并起一个别名为android*/        webView.addJavascriptInterface(new JsToJava(), "android");         /*加载页面*/        webView.loadUrl("file:///android_asset/index.html");        /*调用普通方法*/        btn1.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                webView.loadUrl("javascript:showDialog()");            }        });         /*调用有参方法*/        btn2.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                webView.loadUrl("javascript:showDialog1('yzq')");            }        });        /*调用传递数据的方法*/        btn3.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                webView.loadUrl("javascript:setData()");            }        });    }    /*定义本地方法*/    private class JsToJava {        /*js调本地方法*/        @JavascriptInterface        public void nativeMethod() {            Toast.makeText(MainActivity.this, "Android本地方法", Toast.LENGTH_LONG).show();        }        /*js像本地传递数据*/        @JavascriptInterface        public void getData(String result) {            Toast.makeText(MainActivity.this, result, Toast.LENGTH_SHORT).show();        }    }}

图示：

这里写图片描述

demo

阅读全文

1 0