概述Webview与JS互调

最新推荐文章于 2024-06-05 20:11:08 发布

怀君

最新推荐文章于 2024-06-05 20:11:08 发布

阅读量907

点赞数

分类专栏： android 文章标签： android

本文链接：https://blog.csdn.net/u013290250/article/details/53643577

版权

android 专栏收录该内容

50 篇文章 4 订阅

订阅专栏

概述
一个视图显示web页面。这个类的基础你可以滚自己的web浏览器或简单地显示一些网上的内容在你的活动。它使用WebKit渲染引擎显示web页面,包括方法通过历史向前或者向后导航,放大和缩小,执行文本搜索和更多。

如果我们想用web,首先需要在Android Manifest.xml文件添加 INTERNET 权限

<uses-permission android:name="android.permission.INTERNET" />

接下来我们直接先简单实现加载WebView

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("http://www.baidu.com");
//我们直接这么写，会产生调用系统浏览器。
//所以我们要强制在webview打开网页，防止使用系统默认的浏览器打开网页
        webview.setWebViewClient(new WebViewClient() {

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return super.shouldOverrideUrlLoading(view, url);
            }
//网页开始加载
            @Override 
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
            }
//网页加载结束
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
            }
        });
webview.setWebChromeClient(new WebChromeClient() {

            @Override
            public void onReceivedTitle(WebView view, String title) {
                //onReceivedTitle可以回调网页的title
                toolbar_title.setText(title);
                super.onReceivedTitle(view, title);
            }

            @Override
            public void onProgressChanged(WebView view, int newProgress) {
            //该方法可以获取到 网页加载的进度， newProgress 进度值。
            //可以在该方法添加进度条
                if (progressbar != null) {
                    progressbar.setMax(100);
                    progressbar.setProgress(newProgress);
                    // 如果进度大于或者等于100，则隐藏进度条
                    if (newProgress >= 100) {
                        progressbar.setVisibility(View.GONE);
                    } else {
                        if (!progressbar.isShown()) {
                            progressbar.setVisibility(View.VISIBLE);
                        }
                        progressbar.setProgress(newProgress);
                    }
                }
                super.onProgressChanged(view, newProgress);
            }
        });

上面讲了一些简单的加载，那么问题来了，在做项目的过程中可能会调用到JavaScript

WebSettings webSettings = myWebView.getSettings();
//1.设置WebView允许调用js
webSettings.setJavaScriptEnabled(true);
 //2.将object对象暴露给Js,调用addjavascriptInterface
webview.addJavascriptInterface(new MyObject(this), "Android");
//3.加载url地址，现在这个demo.html。是我们自己写的一个本地html我们把该文件放到 assets文件夹中
webview.loadUrl("file:///android_asset/demo.html");

demo.html 请自行测试

<html>
<head>
    <title>Js调用Android</title>
    <script>
     function showMyobjToast(toast) {
        Android.showToast(toast);
     }
    function showDialog() {
        Android.showDialog();
    }
    </script>
</head>

<body>
<input type="button" value="Toast提示" onclick="showMyobjToast('曹神前来日狗~')"/>
<input type="button" value="列表对话框" onclick="showDialog();"/>
</body>
</html>

public class MyObject {
    private Context context;

    public MyObject(Context context) {
        this.context = context;
    }
    // @JavascriptInterface注解，必须加上
    //将显示Toast和对话框的方法暴露给JS脚本调用
    @JavascriptInterface 
    public void showToast(String name) {
        Toast.makeText(context, name, Toast.LENGTH_SHORT).show();
    }
    @JavascriptInterface
    public void showDialog() {
        new AlertDialog.Builder(context)
                .setTitle("联系人列表").setIcon(R.mipmap.ic_launcher)
                .setItems(new String[]{"基神", "B神", "曹神", "街神", "翔神"}, null)
                .setPositiveButton("确定", null).create().show();
    }
}

为什么必须加 @JavascriptInterface注解

浏览网页的历史，在使用webview可能会用到返回，前进。

WebView重写URL加载时,它会自动累积的历史访问web页面。你可以通过历史与导航向后和向前goBack()和goForward()。例如,这就是你的活动可以使用设备后退按钮向后导航

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    // 检查是否关键事件是后退按钮,如果有历史返回true
    if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack() {
        myWebView.goBack();
        return true;
    }
    // 如果没有返回键或没有网页历史,则返回退出
    return super.onKeyDown(keyCode, event);
}