Android编程使用WebView实现与Javascript交互的方法【相互调用参数、传值】

时间：2021-05-20

本文实例讲述了Android编程使用WebView实现与Javascript交互的方法。分享给大家供大家参考，具体如下：

Android中可以使用WebView加载网页，同时Android端的Java代码可以与网页上的JavaScript代码之间相互调用。

效果图：

（一）Android部分：

布局代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:focusable="true" android:focusableInTouchMode="true" android:orientation="vertical" android:padding="8dp" tools:context=".MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/input_et" android:layout_width="0dp" android:layout_height="wrap_content" android:singleLine="true" android:layout_weight="1" android:hint="请输入信息" /> <Button android:text="Java调用JS" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="sendInfoToJs" /> </LinearLayout> <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent" /></LinearLayout>

Activity代码：

/** * Android WebView 与 Javascript 交互。 */public class MainActivity extends ActionBarActivity { private WebView webView; @SuppressLint({"SetJavaScriptEnabled", "AddJavascriptInterface"}) @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); webView = (WebView) findViewById(R.id.webView); webView.setVerticalScrollbarOverlay(true); //设置WebView支持JavaScript webView.getSettings().setJavaScriptEnabled(true); String url = "http://192.168.1.27/js_17_android_webview.html"; webView.loadUrl(url); //在js中调用本地java方法 webView.addJavascriptInterface(new JsInterface(this), "AndroidWebView"); //添加客户端支持 webView.setWebChromeClient(new WebChromeClient()); } private class JsInterface { private Context mContext; public JsInterface(Context context) { this.mContext = context; } //在js中调用window.AndroidWebView.showInfoFromJs(name)，便会触发此方法。 @JavascriptInterface public void showInfoFromJs(String name) { Toast.makeText(mContext, name, Toast.LENGTH_SHORT).show(); } } //在java中调用js代码 public void sendInfoToJs(View view) { String msg = ((EditText) findViewById(R.id.input_et)).getText().toString(); //调用js中的函数：showInfoFromJava(msg) webView.loadUrl("javascript:showInfoFromJava('" + msg + "')"); }}

（二）网页代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://" /><title>Android WebView 与 Javascript 交互</title><head> <style> body {background-color:#e6e6e6} .rect { color:white; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; width:100px; padding:6px; background-color:#98bf21; text-decoration:none; text-align:center; border:none; cursor:pointer; } .inputStyle {font-size:16px;padding:6px} </style></head><body> <p>测试Android WebView 与 Javascript 交互</p> <input id = "name_input" class = "inputStyle" type="text"/> <a class = "rect" onclick="sendInfoToJava()">JS调用Java</a> <script> function sendInfoToJava(){ //调用android程序中的方法，并传递参数 var name = document.getElementById("name_input").value; window.AndroidWebView.showInfoFromJs(name); } //在android代码中调用此方法 function showInfoFromJava(msg){ alert("来自客户端的信息："+msg); } </script></body></html>

更多关于Android相关内容感兴趣的读者可查看本站专题：《Android视图View技巧总结》、《Android开发动画技巧汇总》、《Android编程之activity操作技巧总结》、《Android布局layout技巧总结》、《Android开发入门与进阶教程》、《Android资源操作技巧汇总》及《Android控件用法总结》

希望本文所述对大家Android程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章