android中java和js交互

2019-11-09 15:07:42

字体：大中小

来源：转载

供稿：网友

在Android中WebView加载网页时，我们可能需要进行一定的交互。例如: 1. 点击网页的一个按钮触发Android系统的Toast、弹框等 2. 点击Android的button触发网页的响应如果想实现以上的需求，就会想到java和js的一些互调的知识。

下面举例说明

准备网页 index.html放在项目main下面的assets文件夹下，内容如下：<html><head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.CSS"> <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> <script type="text/Javascript">function javaGetJs(){ document.getElementById("content").innerHTML = "<br/>JAVA调用了JS的无参函数";}function javaGetJsWith(arg){ document.getElementById("content").innerHTML = ("<br/>"+arg);} </script></head><body>HTML 内容显示 <br/><h1> <div id="content">内容显示</div></h1><button onclick="window.android.startFunction()" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"> 点击调用java代码</button><button onclick="window.android.startFunction('这是来自html的内容')" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"> 点击调用java代码,传递参数</button></body></html>

两个function负责接收java的调用，一个有参数，一个无参数两个button负责调用java的方法，一个有参数，一个无参数

布局activity_main.xml<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="js无参数" tools:layout_editor_absoluteX="234dp" tools:layout_editor_absoluteY="0dp" android:layout_alignParentTop="true" android:layout_alignParentEnd="true" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="js有参数" tools:layout_editor_absoluteX="57dp" tools:layout_editor_absoluteY="0dp" android:layout_alignParentTop="true" android:layout_alignParentStart="true" /> <WebView android:id="@+id/webView" android:layout_width="385dp" android:layout_height="364dp" tools:layout_editor_absoluteX="0dp" tools:layout_editor_absoluteY="139dp" android:layout_alignParentBottom="true" android:layout_alignParentStart="true" android:layout_marginBottom="20dp" android:layout_below="@+id/button2" /></RelativeLayout>MainActivity.java PRivate WebView webView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); webView = (WebView)findViewById(R.id.webView); initWebView(); //无参数 findViewById(R.id.button).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { webView.loadUrl("javascript:javaGetJsWith(" + "'这个是java传递的内容'" + ")"); } }); //有参数 findViewById(R.id.button2).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { webView.loadUrl("javascript:javaGetJs()"); } }); } private void initWebView() { webView.getSettings().setJavaScriptEnabled(true); webView.loadUrl("file:///android_asset/index.html"); webView.addJavascriptInterface(MainActivity.this,"android"); } //接收js的调用，无参数 @JavascriptInterface public void startFunction(){ runOnUiThread(new Runnable() { @Override public void run() { Toast.makeText(MainActivity.this,"html调用了java的方法",3000).show(); } }); } //接收js的调用，有参数 @JavascriptInterface public void startFunction(final String text){ runOnUiThread(new Runnable() { @Override public void run() { new AlertDialog.Builder(MainActivity.this).setMessage(text).show(); } }); }

其中注解 @JavascriptInterface是来接收js调用java的方法，一个标识源码地址

上一篇：Android技术之APP彻底退出

下一篇：Android下打印调试堆栈方法