在现在的App当中，我们经常需要在原生界面中插入HTML5页面，需要在两者之间交互，也就是原生代码和HTML5互调方法，一起来了解一下如何实现的吧！
1.原生代码调用HTML5页面方法
例如，app要调用HTML5页面的changeColor(color)的方法，来改变HTML5页面的颜色
1.HTML5 部分
<script type="text/javascript">
document.write("Hello World!")
function changeColor(color){
document.body.style.background = color;
}
</script>
2.Android 部分
//开启JavaScript支持
webView.getSettings().setJavaScriptEnabled(true);
//放在assets的html需加上android_asset/ 也可以用网络上的文件
webView.loadUrl("file:///android_asset/show.html");
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String color = "#cccccc";
webView.loadUrl("javascript: changeColor('" + color + "')");
}
});
2.HTLM5页面调用原生方法
例如，点击HTML5页面的文字，回调原生代码中的showDialog方法
1.HTML 部分
<a onClick="baobao.showDialog(100,100,'标题',true)">点击弹出系统Dialog</a>
// Html 完整代码：
<!doctype html>
<html lang="en">
<body>
<a onClick="baobao.showDialog(100,100,'标题',true)">点击弹出系统Dialog</a>
<script type="text/javascript">
function changeColor(color){
document.body.style.background = color;
}
</script>
</body>
</html>
- Android 部分
// 添加一个对象, 让JS可以访问该对象的方法, 该对象中可以调用JS中的方法
webView.addJavascriptInterface(new JSInterface1(), "baobao");
class JSInterface1 {
//JavaScript调用此方法
@JavascriptInterface
public void showDialog(int a, float b, String c, boolean d) {
if (d) {
String strMessage = "a+b+c=" + a + b + c;
new AlertDialog.Builder(Java2JsActivity.this).setTitle(c).setMessage(strMessage).show();
}
}
}
//Android部分完整代码，布局就是WebView + Button
public class Java2JsActivity extends AppCompatActivity {
WebView webView;
Button btn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_java2_js);
webView = (WebView) findViewById(R.id.webview);
btn = (Button) findViewById(R.id.btn);
//开启JavaScript支持
webView.getSettings().setJavaScriptEnabled(true);
//放在assets的html需加上android_asset/ 也可以用网络上的文件
webView.loadUrl("file:///android_asset/show.html");
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String color = "#cccccc";
webView.loadUrl("javascript: changeColor('" + color + "')");
}
});
// 添加一个对象, 让JS可以访问该对象的方法, 该对象中可以调用JS中的方法
webView.addJavascriptInterface(new JSInterface1(), "baobao");
}
class JSInterface1 {
//JavaScript调用此方法
@JavascriptInterface
public void showDialog(int a, float b, String c, boolean d) {
if (d) {
String strMessage = "a+b+c=" + a + b + c;
new AlertDialog.Builder(Java2JsActivity.this).setTitle(c).setMessage(strMessage).show();
}
}
}
}
到此简单的Android与HTML5代码间的互调就完成了
<某些场景，Java调用js，如果js没有加载完成，就会调用不成功，加入对应的js加载完成的监听方法，再进行处理就可以>
小伙伴们有任何疑问或者建议欢迎留言或者加微信讨论; 微信：mox1103
网友评论