WebView的简单使用

最新推荐文章于 2020-10-13 20:04:34 发布

llayjun

最新推荐文章于 2020-10-13 20:04:34 发布

阅读量363

点赞数

分类专栏： Android 文章标签： webview

本文链接：https://blog.csdn.net/llayjun/article/details/53648854

版权

Android 专栏收录该内容

76 篇文章 0 订阅

订阅专栏

一、WebView的简单使用

mWebView = (WebView) findViewById(R.id.web_view);
        //获取WebSettings对象，进行简单的设置
        WebSettings _webSetting = mWebView.getSettings();
        _webSetting.setJavaScriptEnabled(true);
        _webSetting.setBuiltInZoomControls(true);
        _webSetting.setSupportZoom(true);
        mWebView.requestFocus();
        mWebView.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY);
        //加载html的样式
        mWebView.loadData("<html><title>Millet</title><body>hello webapp!</body></html>", "text/html", "utf-8");
        //加载url
        mWebView.loadUrl(mUrl);

二、WebView的两个常用的set方法

//希望点击的链接在当前的browser中进行响应，必须覆盖WebViewClient对象
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        //处理图标，按钮等事件，必须覆盖WebChromeClient对象
        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onReceivedTitle(WebView view, String title) {
                super.onReceivedTitle(view, title);
            }
        });

三、WebView的回退事件

@Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        //设置回退键，判断点击的是回退键，并且WebView可以回退
        if (keyCode == KeyEvent.KEYCODE_BACK && mWebView.canGoBack()) {
            mWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

四、WebView和JS的交互

//添加JavaScript的接口，第一个参数是Object对象，一般为html中想要调用WebView中的方法，第二个为别名
        mWebView.addJavascriptInterface(new MyJavascriptInterface(), "Millet");

/**
     * 想通过html文件中对WebView的一些操作
     */
    public class MyJavascriptInterface {

        @JavascriptInterface
        public void clickOnAndroid() {
            mHandler.post(new Runnable() {
                @Override
                public void run() {
                    //Android中调用html中javascript的onClick()方法
                    mWebView.loadUrl("javascript:onClick()");
                    Toast.makeText(WebViewActivity.this, "点击了图片", Toast.LENGTH_SHORT).show();
                }
            });
        }
    }

index.html文件

<html>
<head>
    <title>my first WebApp</title>
    <script language="JavaScript">

        function onClick(){
        document.getElementById("imageId").src ="card_flip_back_image1.jpg";
        }

    </script>
</head>

<body>
<!--html中调用Android中的方法-->
<a onclick="window.Millet.clickOnAndroid()">
    <img src="card_flip_front_image1.jpg" id="imageId" width="100%" height="100%">
</a>
</body>

</html>

四、全部代码
java代码：

public class WebViewActivity extends BaseActivity {

    protected WebView mWebView;
    protected String mUrl = "https://www.baidu.com";

    protected Handler mHandler = new Handler();

    @Override
    public void initData(Bundle savedInstanceState) {

    }

    @Override
    public void initView(Bundle savedInstanceState) {
        setContentView(R.layout.activity_web_view);
        mWebView = (WebView) findViewById(R.id.web_view);
        //获取WebSettings对象，进行简单的设置
        WebSettings _webSetting = mWebView.getSettings();
        _webSetting.setJavaScriptEnabled(true);
        _webSetting.setBuiltInZoomControls(true);
        _webSetting.setSupportZoom(true);
        mWebView.requestFocus();
        mWebView.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY);
        //希望点击的链接在当前的browser中进行响应，必须覆盖WebViewClient对象
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        //处理图标，按钮等事件，必须覆盖WebChromeClient对象
        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onReceivedTitle(WebView view, String title) {
                super.onReceivedTitle(view, title);
            }
        });
        //加载html的样式
//        mWebView.loadData("<html><title>Millet</title><body>hello webapp!</body></html>", "text/html", "utf-8");
        //加载url
//        mWebView.loadUrl(mUrl);
        //添加JavaScript的接口，第一个参数是Object对象，一般为html中想要调用WebView中的方法，第二个为别名
        mWebView.addJavascriptInterface(new MyJavascriptInterface(), "Millet");
        mWebView.loadUrl("file:///android_asset/index.html");
    }

    @Override
    public void loadData(Bundle savedInstanceState) {

    }

    /**
     * 想通过html文件中对WebView的一些操作
     */
    public class MyJavascriptInterface {

        @JavascriptInterface
        public void clickOnAndroid() {
            mHandler.post(new Runnable() {
                @Override
                public void run() {
                    //Android中调用html中javascript的onClick()方法
                    mWebView.loadUrl("javascript:onClick()");
                    Toast.makeText(WebViewActivity.this, "点击了图片", Toast.LENGTH_SHORT).show();
                }
            });
        }
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        //设置回退键，判断点击的是回退键，并且WebView可以回退
        if (keyCode == KeyEvent.KEYCODE_BACK && mWebView.canGoBack()) {
            mWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

}

index.html代码：

<html>
<head>
    <title>my first WebApp</title>
    <script language="JavaScript">

        function onClick(){
        document.getElementById("imageId").src ="card_flip_back_image1.jpg";
        }

    </script>
</head>

<body>
<!--html中调用Android中的方法-->
<a onclick="window.Millet.clickOnAndroid()">
    <img src="card_flip_front_image1.jpg" id="imageId" width="100%" height="100%">
</a>
</body>

</html>