Android与JavaScript之间的相互调用
Posted xingxing_yan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Android与JavaScript之间的相互调用相关的知识，希望对你有一定的参考价值。
首先，先大体说一下流程：
1. android显示网页需要使用WebView， 所以，定义一个WebView
2. 设置WebView控件可以执行javascript
3. 使用addJavascriptInterface方法声明允许JavaScript调用Android的方法
4. 使用@javascriptInterface注解一个方法，此方法就是web端需要调用的
5. 使用loadUrl去加载一个html页面(可以是本地也可以是网络的)
大概流程就是这样了，下面我们看代码：
主界面的布局activity_main.xml：
<span style="font-size:18px;"><RelativeLayout 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" >
<Button
android:id="@+id/id_bt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:text="调用JavaScript" />
<WebView
android:id="@+id/id_web"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/id_bt" />
</RelativeLayout></span>
<span style="font-size:18px;"><span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
document.getElementById("demo").innerHTML="My First JavaScript Function";
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<button type="button" οnclick="window.android.testJS()">JS invoke android method</button>
</body>
</html></span></span>
注意：页面中onclick中的android必须和下边 mWebView.addJavascriptInterface(MainActivity.this, "android")中的一致
主界面的代码：
<span style="font-size:18px;"><span style="font-size:14px;">package com.example.testother;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebSettings.LayoutAlgorithm;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.Toast;
public class MainActivity extends Activity
private WebView mWebView;
private WebSettings mWebSettings;
private Button mBt;
@Override
protected void onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
mBt = (Button) findViewById(R.id.id_bt);
mWebView = (WebView) findViewById(R.id.id_web);
mWebSettings = mWebView.getSettings();
mWebSettings.setJavaScriptEnabled(true); //1. 设置WebView可以执行JavaScript
mWebSettings.setSupportZoom(true);
mWebSettings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
// 提高渲染等级
mWebSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);
mWebView.loadUrl("file:///android_asset/testH5.html");
//2. 声明允许JavaScript调用Android应用的方法
mWebView.addJavascriptInterface(MainActivity.this, "android");
mWebView.setWebViewClient(new WebViewClient()
@Override
public void onPageFinished(WebView view, String url)
super.onPageFinished(view, url);
//3. Android中调用JS中方法
mBt.setOnClickListener(new OnClickListener()
@Override
public void onClick(View v)
mWebView.loadUrl("javascript:myFunction()");
);
);
//4 供JS调用的方法(必须使用@JavascriptInterface注解)
@JavascriptInterface
public void testJS()
Toast.makeText(this, "this is android method", Toast.LENGTH_SHORT).show();
</span></span>主界面中布局中有一个Button和WebView控件，WebView加载的HTML页面中也有一个button，点击主界面的button会执行HTML页面中JavaScript的myFunction()方法，点击HTML页面中的button，则会执行Android 中的testJS()方法
以上是关于Android与JavaScript之间的相互调用的主要内容，如果未能解决你的问题，请参考以下文章
iOS中Objective-C与JavaScript之间相互调用的实现（实现了与Android相同的机制）
Android高手进阶教程(二十)之---Android与JavaScript方法相互调用！