Android与js交互

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

喻志强(Xeon)

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

阅读量1.8k

点赞数 1

分类专栏：混合开发文章标签： android调js js调android js与android

本文为博主原创文章，转载请注明本文转自 [喻志强的博客](https://blog.csdn.net/yuzhiqiang_1993)。如果文中有什么纰漏或错误,请留言指正。如果您觉得文章对你有帮助，请三连支持，谢谢！

本文链接：https://blog.csdn.net/yuzhiqiang_1993/article/details/73657988

版权

混合开发专栏收录该内容

12 篇文章 6 订阅

订阅专栏

在混合开发中，我们的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