在android开发中经常涉及到webview中java方法与js方法的相互调用，在此我就小露一下身手。既然是相互调用，也就是说分为两种情况：
1.js调用java方法。2.java调用js方法。话不多说，放代码(多看代码中的注释)。
1.java代码：
public class TestWebViewActivity extends AppCompatActivity {
private WebView webView;
private EditText et_content;
private TextView submit;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_test_webview);
webView= (WebView) findViewById(R.id.webView);
et_content= (EditText) findViewById(R.id.content);
submit= (TextView) findViewById(R.id.submit);
submit.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String msg=et_content.getText().toString();
//2.java调用js方法
webView.loadUrl("javascript:showInfoFromJava('" + msg + "')");
}
});
WebSettings settings=webView.getSettings();
settings.setJavaScriptEnabled(true);
//wusir作为注入接口别名，在html的js代码部分会用到。
webView.addJavascriptInterface(new JsInterface(),"wusir");
//为了方便测试，我在项目本地的asset中加入了html文件，实际开发时请换成后台开发给的url。
webView.loadUrl("file:///android_asset/js_webview.html");
}
//1.js调用java方法，定义注入接口JsInterface
private class JsInterface{
@JavascriptInterface
public void onSumResult(int result){
Toast.makeText(getApplicationContext(), result+"", Toast.LENGTH_LONG).show();
}
@JavascriptInterface
public void callPhone(String phone){
//调用手机系统电话功能
Uri uri = Uri.parse("tel:" + phone);
Intent dialIntent = new Intent(Intent.ACTION_DIAL, uri);
startActivity(dialIntent);
}
}
}
2.activity对应的布局代码：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--EditText和TextView用于java调用js方法-->
<EditText
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="60dp" />
<TextView
android:id="@+id/submit"
android:layout_width="match_parent"
android:layout_height="30dp"
android:text="提交内容到webview的p标签"
android:textColor="#fff"
android:gravity="center"
android:background="@drawable/small_green_button"/>
<!--WebView用于js调用java方法-->
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="200dp"></WebView>
</LinearLayout>
3.js_webview.html代码：
css代码可以忽略,js代码随你放在head中，还是body中。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#p1{
width: 100%;
height: 50px;
line-height: 50px;
color: #ffffff;
background-color: #0066ff;
}
</style>
</head>
<body>
<script type="text/javascript">
//1.js调用java方法
function sumToJava(){
window.wusir.onSumResult(1 + 2)
}
function callphone(){
window.wusir.callPhone("15757184616")
}
//2.java调用js方法
function showInfoFromJava(msg) {
document.getElementById("p1").innerHTML=msg;
}
</script>
<h3>1.js调用java方法实例</h3>
<button type="button" onclick="sumToJava()">1+2=</button>
<button type="button" onclick="callphone()">打电话</button>
<h3>2.java调用js方法实例</h3>
<p id="p1">Hello World!</p>
</body>
</html>
结语
好了，就是这些了，重点是不要混淆了1.js调用java方法、2.java调用js方法。如果有什么不妥之处请大佬指正。
网友评论