Js_WebView交互

最新推荐文章于 2024-06-20 12:06:28 发布

凌宇大哥哥

最新推荐文章于 2024-06-20 12:06:28 发布

阅读量345

点赞数

本文链接：https://blog.csdn.net/qq_15075579/article/details/51719771

版权

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" οnclick="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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Js_WebView交互

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;imp
复制链接

扫一扫