WebView与JavaScript的交互总结
1、交互总结
WebView与JS之间的交互总结可以概括为下面两种:
- Android客户端去调用JS代码
- JS端去调用Android原生代码
它们之间互相调用的桥梁是WebView。
2、交互前准备
2.1 Android客户端代码
Activity:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = findViewById(R.id.web_view);
//android调用JS代码的Button
btnAndroidCallJS = findViewById(R.id.btn_call_js);
//防止外部浏览器调用此链接
webView.setWebViewClient(new WebViewClient());
WebSettings settings = webView.getSettings();
//允许WebView使用JS
settings.setJavaScriptEnabled(true);
//支持通过JS打开新窗口(允许JS弹窗)
settings.setJavaScriptCanOpenWindowsAutomatically(true);
}
XML:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/container"
tools:context="com.zw.plugins.MainActivity">
<WebView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@id/btn_call_js"
android:id="@+id/web_view"></WebView>
<Button
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="@+id/btn_call_js"
android:text="Android调用JS"
app:layout_constraintTop_toBottomOf="@id/web_view"
app:layout_constrai