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

Android原生WebView与网页js相互调用

2017-03-20 17:43 429 查看

随着手机网络的升级，越来越多的开发者在一些页面使用网页来代替Adroid原生页面。这就需要Android和Js之间相互传递参数相互调用方法。今天就来带大家实现Android与Js的互调。

先来看运行图：

代码MainActivity.java

public class MainActivity extends Activity {

private WebView webView;
private EditText editText;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

webView = (WebView) findViewById(R.id.webView);
editText = (EditText) findViewById(R.id.editText);
initWebView();
}

// 初始化WebView

private void initWebView() {

// 不跳转到其他浏览器
webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
WebSettings settings = webView.getSettings();
// 设置支持Js
settings.setJavaScriptEnabled(true);
// 加载本地html文件
webView.loadUrl("file:///android_asset/JsMutualAndroid.html");
webView.addJavascriptInterface(new JSInterface(), "havorld");
}

// 按钮的点击事件
public void click(View view) {

// javascript:javaCallJs('内容')
String str = "javascript:androidCallJs(" + "'"+ editText.getText().toString() + "'" + ")";
// java调用JS方法
webView.loadUrl(str);
}

private class JSInterface {
// JS需要调用的方法， 在API 17之前有一些漏洞，所以在API 17以后，需要在JavaScript接口类的方法加上@JavascriptInterface注解
@JavascriptInterface
public void jsCallAndroid(String str) {

Toast.makeText(SecondActivity.this, str, Toast.LENGTH_SHORT).show();
}
}

}

布局activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/ll_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFEA2"
android:padding="10dp"
android:text="Android原生"
android:textSize="16sp" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFEA2"
android:orientation="vertical"
android:padding="10dp" >

<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:hint="请输入传入Js的内容"
android:textSize="16sp" >

<requestFocus />
</EditText>

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="click"
android:text="向WebView传入内容"
android:textSize="16sp" />
</LinearLayout>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:background="#FF80C0"
android:padding="10dp"
android:text="WebView"
android:textSize="16sp" />

<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

</LinearLayout>

在Android的assets目录下放置JsMutualAndroid.html文件

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script type="text/javascript">
function androidCallJs(str) {
document.getElementById("content").innerHTML = ("您输入了：" + str);
}
</script>
<style type="text/css">
body {
background-color: #FF80C0;
padding: 10px;
font-size: 16px;
}

#content {
text-align: center;
}

.btn {
display: block;
width: 100%;
margin-top: 10px;
font-size: 16px;
padding: 5px 0;
}
</style>
</head>
<body>
<div id="content"></div>
<input class="btn" type="button" value="点击Js调用Android"
onclick="window.havorld.jsCallAndroid('我来自Js调用')" />
</body>
</html>
</html>

OK，这样就可以了，有没有一种so easy的赶脚。

点击下载源码

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

标签： webview Js Android 互调原生js

相关文章推荐

新的分享

章节导航