Js_WebView交互

来源：互联网发布：致远软件招聘编辑：程序博客网时间：2024/05/23 01:51

package com.messcat.android_js;import android.content.Context;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.text.TextUtils;import android.view.View;import android.webkit.JavascriptInterface;import android.webkit.WebChromeClient;import android.webkit.WebView;import android.webkit.WebViewClient;import android.widget.Button;import android.widget.EditText;import android.widget.Toast;public class MainActivity extends AppCompatActivity implements View.OnClickListener {    private EditText etJsAlertText;    private Button btJsAlertToShow;    private WebView webview;    private void assignViews() {        etJsAlertText = (EditText) findViewById(R.id.et_JsAlert_Text);        btJsAlertToShow = (Button) findViewById(R.id.bt_JsAlert_toShow);        webview = (WebView) findViewById(R.id.webview);        btJsAlertToShow.setOnClickListener(this);    }    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        assignViews();        initWebViewConfig();    }    private void initWebViewConfig() {        webview.setVerticalScrollbarOverlay(true);        webview.getSettings().setJavaScriptEnabled(true);        webview.setWebChromeClient(new WebChromeClient());        webview.setWebViewClient(new WebViewClient());        webview.loadUrl("file:///android_asset/AndroidJs.html");        //在js中调用本地java方法        webview.addJavascriptInterface(new JsInterface(this), "AndroidWebView");    }    @Override    public void onClick(View view) {        switch (view.getId()) {            case R.id.bt_JsAlert_toShow:                sendInfoToJs();                break;            default:                break;        }    }    /**     * js调用Android的接口     */    private class JsInterface {        private Context mcontext;        public JsInterface(Context mcontext) {            this.mcontext = mcontext;        }        @JavascriptInterface        public void showInfoFromJs(String info) {            Toast.makeText(mcontext, info, Toast.LENGTH_SHORT).show();        }    }    /**     * 从Android传递参数过去webview     */    public void sendInfoToJs() {        String info = etJsAlertText.getText().toString().trim().replace(" ", "");        if (TextUtils.isEmpty(info)) {            Toast.makeText(MainActivity.this, "请输入参数", Toast.LENGTH_SHORT).show();            return;        }        //调用js中的函数：showInfoFromJava(msg)        webview.loadUrl("javascript:showInfoFromJava('" + info + "')");    }}

<?xml version="1.0" encoding="utf-8"?><RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context="com.messcat.android_js.MainActivity">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="50dp"        android:orientation="horizontal">        <EditText            android:id="@+id/et_JsAlert_Text"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="4" />        <Button            android:id="@+id/bt_JsAlert_toShow"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="2"            android:text="JsShowAlert"            android:textSize="12sp" />    </LinearLayout>    <WebView        android:id="@+id/webview"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_marginTop="60dp" /></RelativeLayout>

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><p>测试Android WebView 与 Javascript 交互</p><input id="name_input" class="inputStyle" type="text" /><a class="rect" onclick="sendInfoToJava()">JS调用Java</a></body><script type="text/javascript">function sendInfoToJava() {//调用android程序中的方法，并传递参数var name = document.getElementById("name_input").value;window.AndroidWebView.showInfoFromJs(name);}//在android代码中调用此方法function showInfoFromJava(msg) {alert("来自客户端的信息：" + msg);}</script></html>

0 0