WebView+js简单应用

最新推荐文章于 2024-05-24 14:38:14 发布

wind_Cill

最新推荐文章于 2024-05-24 14:38:14 发布

阅读量220

点赞数

MainActivity

package bw.com.bw_day16_webview;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;
import android.widget.Toast;

/**
 * 自己手动往asset文件夹下存放一个含有Javascript的HTML文件，使用Webview
 从这个HTML文件中加载网页页面
 */
public class Main5Activity extends AppCompatActivity {

    private WebView mWebView;
    private ProgressBar mProgressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main5);

        mWebView = (WebView) findViewById(R.id.web_view_id);
        mProgressBar = (ProgressBar) findViewById(R.id.pb_id);

        //1, 加载页面
        mWebView.loadUrl("file:///android_asset/myjs.html");

        //2, 设置在当前的页面中加载
        mWebView.setWebViewClient(new WebViewClient());

        //3, 设置属性 -- 支持js
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);//支持js
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);//设置允许js弹出窗口
        //支持屏幕缩放
        webSettings.setSupportZoom(true);
        webSettings.setSupportMultipleWindows(true);


        //4, 页面的交互
        mWebView.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                //TODO 页面加载进度发生变化的回调方法
                super.onProgressChanged(view, newProgress);
                mProgressBar.setProgress(newProgress);
            }

            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                //TODO 得到页面中js的回调方法
                Toast.makeText(Main5Activity.this, message, Toast.LENGTH_LONG).show();
                return true;
            }
        });
    }

    //显示js中的信息
    public void onClick(View view) {
        mWebView.loadUrl("javascript:callJs()");
    }
    //下一页
    public void forward(View view) {
        if(mWebView.canGoForward()) mWebView.goForward();
    }
    //上一页,返回
    public void back(View view) {
        if(mWebView.canGoBack()) mWebView.goBack();
    }
}

布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="bw.com.bw_day16_webview.Main5Activity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="显示js中的内容"
        android:onClick="onClick"
        />

    <ProgressBar
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:id="@+id/pb_id"
        style="?android:attr/progressBarStyleHorizontal"/>

    <WebView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/web_view_id"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="上一页"
        android:onClick="back"
        />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="下一页"
        android:onClick="forward"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="返回"
        android:onClick="back"/>

</LinearLayout>

assets

myjs.html文件

<html>
<head>

    <meta charset="UTF-8">
    <script>
        function callJs()
        {
            alert("白日依山尽,黄河入海流.欲穷千里目,更上一层楼!!!");
        }
    </script>

</head>

<body>
        点击应用中的按钮, 显示网页中js输出的数据
</body>
</html>