WebView与H5的交互

最新推荐文章于 2024-01-01 23:54:00 发布

Sun_LeiLei

最新推荐文章于 2024-01-01 23:54:00 发布

阅读量1.3k

点赞数 1

分类专栏： Android初级文章标签： H5 WebView js Android

本文链接：https://blog.csdn.net/Sun_LeiLei/article/details/50925271

版权

Android初级专栏收录该内容

8 篇文章 0 订阅

订阅专栏

H5Activity

package com.asker202.myservice;

import android.annotation.SuppressLint;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.Toast;

public class H5Activity extends AppCompatActivity implements View.OnClickListener{
private WebView wv;
    private Button btn;
    private String url="file:///android_asset/js.html";//文件放在assets中
    @SuppressLint("JavascriptInterface")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_h5);
        wv= (WebView) findViewById(R.id.wv);
        btn= (Button) findViewById(R.id.btn);
        btn.setOnClickListener(this);
        WebSettings webSettings = wv.getSettings();
        webSettings.setSaveFormData(false);
        webSettings.setJavaScriptEnabled(true);//设置可响应js
        webSettings.setSupportZoom(false);
        wv.setWebChromeClient(new WebChromeClient());
        wv.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");//注入本地方法
        wv.loadUrl(url);

    }

    @Override
    public void onClick(View v) {
        if(v.getId()==R.id.btn)
        {
            wv.loadUrl("javascript:wave()");//调用js方法
        }
    }

    final class DemoJavaScriptInterface {

        DemoJavaScriptInterface() {
        }
        /**
         * @author 孙磊磊
         * create at 2016/3/16 16:50
         * description 4.2及以上版本，需要加 @JavascriptInterface
         */
        @JavascriptInterface
        public void click() {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    btn.setText("从网页上调用本地方法");
                    Toast.makeText(H5Activity.this,"从网页上点击了我",Toast.LENGTH_LONG).show();
                }
            });
        }
    }
}

js.html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
    <script>
         function wave() {
            alert("1");
            document.getElementById("text").innerHTML="从Android中调用js";
            alert("2");
         }
        function js2android(){
            document.getElementById("text").innerHTML="从js中调用Android代码";
            demo.click();
         }
    </script>
    <button type="button" οnclick="javascript:demo.click()">点击这里</button>
    <br/>
    <button type="button" οnclick="windows:demo.click()">点击这里</button>
    <br/>
    <button type="button" οnclick="demo.click()">点击这里</button>
    <br/>
    <button type="button" οnclick="js2android()">点击这里</button>
    <p id="text"></p>
</body>
</html>

布局文件也加上吧

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical"
    tools:context="com.asker202.myservice.H5Activity">
    <Button
        android:id="@+id/btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="调用js"/>
    <WebView
        android:id="@+id/wv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></WebView>
</LinearLayout>

Sun_LeiLei

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WebView与H5的交互

H5Activitypackage com.asker202.myservice;import android.annotation.SuppressLint;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import andro
复制链接

扫一扫

专栏目录