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

Android：WebView与Javascript交互（相互调用参数、传值）

2017-04-20 20:18 639 查看

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

效果图：

（一）Android部分：

布局代码：

[html] view
plain copy

<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代码：

[java] view
plain copy

/**

* 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 + "')");

    }

}

（二）网页代码：

[html] view
plain copy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="Content-Language" content="zh-cn" />



<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>

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

标签：

相关文章推荐

新的分享

章节导航