您的位置：首页 > 移动开发 > Android开发

android 和 js 之间简单的相互调用

2017-08-22 22:20 429 查看

android 中 java 代码和 js 之间简单调用

涉及到的 android API

1, WebView

2, @JavascriptInterface

涉及到的方法：

WebView.getSettings().setJavascriptEnabled();

WebView.loadUrl();

WebView.addJavascriptInterface();

annotation: @android.webkit.JavascriptInterface

准备 html 文件

首先在 AS 工程对应的 module 下的 assets 资产目录中新建 index.html 文件并添加以下内容：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>android js communication</title>
<script type="text/javascript">

// java 调用 js 代码，修改 span 标签内容
function js2Java() {
document.getElementById('eSpan').innerHTML = 'java call js';
}

function js2JavaWithSth(url) {
document.getElementById('eSpan').innerHTML = 'java call js with "' + url + '"';
}

// 弹出吐司
function showToast() {
window.jsInterface.showToast();
}

// html 页面携带内容，并弹出吐司
function showToastWithContent(url){
window.jsInterface.showUrl(url);
}

</script>
</head>
<body>
<h1>android and javascript communication</h1>
<button onclick="showToast()">call java</button>
<button onclick="showToastWithContent('http://192.168.1.103:8089/_index.html')">
call java with url</button>
<br>
<span id="eSpan" style="color: red;"></span> <br>
</body>
</html>

布局文件比较简单，不贴出来了

在 MainActivity.java 中调用相关的 API

private WebView mWebView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// 初始化 WebView
mWebView = (WebView) findViewById(R.id.webview);
// 开启 javascript
mWebView.getSettings().setJavaScriptEnabled(true);
// 加载url，引用 assets/index.html 文件
mWebView.loadUrl("file:///android_asset/index.html");
// 添加 javascript 接口，以便 js 调用 java API
mWebView.addJavascriptInterface(new JavascriptInterface(), "jsInterface");

findViewById(R.id.btn_call_js).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 调用 js 代码
mWebView.loadUrl("javascript:js2Java()");
}
});

findViewById(R.id.btn_call_js_with_sth).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 调用 js 代码
mWebView.loadUrl("javascript:js2JavaWithSth(" + "'a string from java'" + ")");
}
});
}

/* js 调用 java代码 */
private class JavascriptInterface {

/*只有添加了 JavascriptInterface 注解的方法才可以被 js 代码所调用*/
@android.webkit.JavascriptInterface
public void showToast() {
Toast.makeText(MainActivity.this, "hello js", Toast.LENGTH_SHORT).show();
}

/*只有添加了 JavascriptInterface 注解的方法才可以被 js 代码所调用*/
@android.webkit.JavascriptInterface
public void showUrl(final String url) {
Toast.makeText(MainActivity.this, url, Toast.LENGTH_SHORT).show();
}
}

放上一张效果图

后记：

注意：

初始化 WebView –> 开启 javascript –> 加载 ulr –>添加 javascript 接口这个顺序最好不要错乱，否则可能达不到预期的效果。

其中涉及到部分 html 以及 css 知识，在此不做详细描述，有兴趣的朋友可以自行研究。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： android webview

相关文章推荐

新的分享

章节导航