Android 使用WebView显示网页

时间：2021-08-01 07:54:55

构建WebView就可以显示Web信息。
因为我觉得这里会讲述很多方式来实现WebView，所以我决定为每一种方式创建一个对应的Activity，MainActivity通过Button可以点击进入对应的Activity。

通过Intent调用系统浏览器
只需要用到3行代码：
Uri uri = Uri.parse(url);
Intent intent = new Intent(Intent.ACTION_VIEW, uri);
startActivity(intent);
注：url为我需要访问的网页；activity1.xml需要在Manifest.xml中进行注册。

package com.example.webview;

import android.app.Activity;

import android.content.Intent;

import android.net.Uri;

import android.os.Bundle;

public class Activity1 extends Activity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity1);

        String url = "http://www.cnblogs.com/moonlightpoet";

        Uri uri = Uri.parse(url);

        Intent intent = new Intent(Intent.ACTION_VIEW, uri);

        startActivity(intent);

    }

}

Activity1.java

课程目标
通过WebView自制一个简易网页浏览器

课程内容
（1）将WebView加入到你的应用
（2）使用WebView加载页面
（3）获取网络访问权限
  注意：当我们通过意图（Intent）去调用一个系统浏览器或者一个第三方的浏览器的时候，我们是不需要具有Web访问的权限的，而如果我们需要自己来访问Web页面，则需要申请开通网络访问的权限。
（4）在WebView中使用JavaScript
（5）处理页面导航
（6）后退与前进
（7）判断页面加载过程
（8）WebView缓存的运用

使用WebView加载页面
要在WebView加载页面，使用loadUrl()
loadUrl()方法可以加载两种类型的资源：Web资源 和 本地文件
web资源：webView.loadUrl("http://www.example.com")
本地文件：webView.loadUrl("file:///android_asset/XX.html")
本地文件存放在：assets目录中
//使页面获得焦点
webView.requestFocus();

获取网络访问权限
在它有效工作之前，你要保证你的应用能访问网络。要访问网络，需要在你的配置文件中获取INTERNET权限。
<manifest ...>
<uses-permission android:name="android.permission.INTERNET" />
...
</manifest>

WebUrl加载本地文件：
String url = "file:///android_asset/example.html";
webView.loadUrl(url);
将url换成网址就可以加载在线的网页了。
Activity2.java中注释掉的url是本地assets/目录下的example.html对应的uri，但我们实际会演示加载一个在线网页。
String url = "http://www.cnblogs.com/moonlightpoet";
webView.loadUrl(url);
这里我们会发现，网站中的内容嵌套在了WebView容器中。

package com.example.webview;

import android.app.Activity;

import android.os.Bundle;

import android.webkit.WebView;

public class Activity2 extends Activity {

    private WebView webView;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity2);

        webView = (WebView) findViewById(R.id.webView1);

//        String url = "file:///android_asset/example.html";

        String url = "http://www.cnblogs.com/moonlightpoet";

        webView.loadUrl(url);

    }

}

Activity2.java

处理页面导航
当用户点击一个WebView中的页面的链接时，通常，是由默认的浏览器打开并加载目标URL的。然而，你可以在WebView中覆盖着以行为，那么就会在WebView中打开。
webView.setWebViewClient(new WebViewClient());
覆盖WebView默认通过第三方或者是系统浏览器打开网页的行为，使得网页可以在WebView中直接打开。
（注：我在Activity2.java中好像是网页内容就直接显示在TextView中了）
设定shouleOverrideUrlLoading()方法：
 返回值是true的时候是控制网页在WebView中去打开，如果为false则调用系统或第三方浏览器去打开。

        webView.loadUrl(url);

        webView.setWebViewClient(new WebViewClient() {

            @Override

            public boolean shouldOverrideUrlLoading(WebView view, String url) {

                return true;

            }

        });

WebViewClient可以帮助WebView去处理一些页面控制和请求通知

(补充：

        WebSettings webSettings = webView.getSettings();

        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);//设置js可以直接打开窗口，如window.open()，默认为false

        webSettings.setJavaScriptEnabled(true);//是否允许执行js，默认为false。设置true时，会提醒可能造成XSS漏洞

        webSettings.setSupportZoom(true);//是否可以缩放，默认true

        webSettings.setBuiltInZoomControls(true);//是否显示缩放按钮，默认false

        webSettings.setUseWideViewPort(true);//设置此属性，可任意比例缩放。大视图模式

        webSettings.setLoadWithOverviewMode(true);//和setUseWideViewPort(true)一起解决网页自适应问题

        webSettings.setLoadWithOverviewMode(true);//和setUseWideViewPort(true)一起解决网页自适应问题

        webSettings.setDomStorageEnabled(true);//DOM Storage

        webSettings.setUserAgentString("User-Agent:Android");//设置用户代理，一般不用

）

在WebView中使用Javascript
如果你想要你家在在WebView中的web页面使用JavaScript，你需要在WebView中启用JavaScript。启用JavaScript你可以通过WebView中带有的WebSettings来启用它。你可以通过getSettings()来获取WebSettings的值，然后通过setJavaScriptEnabled()来启用JavaScript。
WebView webView = (WebView) findViweById(R.id.webview);
WebSettings webSettings = webView.getSettings();
sebSettings.setJavaScriptEnabled(true);

浏览网页的时候还有一个问题就是：当我点击返回按钮的时候整个activity都退出了，而我要的效果实际上是一个网页的前进和后退的效果，我想要的效果是当我点击返回的时候是我从当前页面返回到我之前访问的那一个页面。
后退与前进
当你的WebView覆盖了URL加载，它会自动生成历史访问记录。你可以通过goBack()或goForward()向前或向后访问已访问过的站点。
我们需要修改物理按键返回的逻辑

    @Override

    public boolean onKeyDown(int keyCode, KeyEvent event) {

        if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) {

            webView.goBack();

            return true;

        }

        return super.onKeyDown(keyCode, event);

    }

判断页面加载过程
由于有些网页肯呢过加载缓慢，所以我们需要去判断页面的加载过程，制作进度条给与用户良好的体验效果。
WebView通过设置一个WebChromeClient并且通过WebChromeClient的onProgressCHanged()方法得到当前加载的进度。

        webView.setWebChromeClient(new WebChromeClient() {

            private ProgressDialog progressDialog;

            @Override

            public void onProgressChanged(WebView view, int newProgress) {

                // newProgress 1 ~ 100 之间的证书

                if (newProgress == 100) {

                    // 加载完成，关闭ProgressDialog

                    closeDialog();

                } else {

                    // 还在加载，打开ProgressDialog

                    openDialog(newProgress);

                }

                super.onProgressChanged(view, newProgress);

            }

            private void closeDialog() {

                if (progressDialog != null && progressDialog.isShowing()) {

                    progressDialog.dismiss();

                    progressDialog = null;

                }

            }

            private void openDialog(int newProgress) {

                if (progressDialog == null) {

                    progressDialog = new ProgressDialog(Activity3.this);

                    progressDialog.setProgress(newProgress);

                    progressDialog.setTitle("正在加载");

                    progressDialog.show();

                } else {

                    progressDialog.setProgress(newProgress);

                }

            }

        });

使用缓存可以优化页面的加载速度
WebView缓存的运用
优先使用缓存：
webView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
不适用缓存：
webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

package com.example.webview;

import android.app.Activity;

import android.app.ProgressDialog;

import android.os.Bundle;

import android.view.KeyEvent;

import android.webkit.WebChromeClient;

import android.webkit.WebSettings;

import android.webkit.WebView;

import android.webkit.WebViewClient;

public class Activity3 extends Activity {

    private WebView webView;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity3);

        webView = (WebView) findViewById(R.id.webView1);

        webView.requestFocus();

        String url = "http://www.cnblogs.com/moonlightpoet";

        webView.loadUrl(url);

        webView.setWebViewClient(new WebViewClient() {

            @Override

            public boolean shouldOverrideUrlLoading(WebView view, String url) {

                webView.loadUrl(url);

                return true;

            }

        });

        WebSettings webSettings = webView.getSettings();

        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);//设置js可以直接打开窗口，如window.open()，默认为false

        webSettings.setJavaScriptEnabled(true);//是否允许执行js，默认为false。设置true时，会提醒可能造成XSS漏洞

        webSettings.setSupportZoom(true);//是否可以缩放，默认true

        webSettings.setBuiltInZoomControls(true);//是否显示缩放按钮，默认false

        webSettings.setUseWideViewPort(true);//设置此属性，可任意比例缩放。大视图模式

        webSettings.setLoadWithOverviewMode(true);//和setUseWideViewPort(true)一起解决网页自适应问题

        webSettings.setLoadWithOverviewMode(true);//和setUseWideViewPort(true)一起解决网页自适应问题

        webSettings.setDomStorageEnabled(true);//DOM Storage

        webSettings.setUserAgentString("User-Agent:Android");//设置用户代理，一般不用

        webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);

        webView.setWebChromeClient(new WebChromeClient() {

            private ProgressDialog progressDialog;

            @Override

            public void onProgressChanged(WebView view, int newProgress) {

                // newProgress 1 ~ 100 之间的证书

                if (newProgress == 100) {

                    // 加载完成，关闭ProgressDialog

                    closeDialog();

                } else {

                    // 还在加载，打开ProgressDialog

                    openDialog(newProgress);

                }

                super.onProgressChanged(view, newProgress);

            }

            private void closeDialog() {

                if (progressDialog != null && progressDialog.isShowing()) {

                    progressDialog.dismiss();

                    progressDialog = null;

                }

            }

            private void openDialog(int newProgress) {

                if (progressDialog == null) {

                    progressDialog = new ProgressDialog(Activity3.this);

                    progressDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);

                    progressDialog.setProgress(newProgress);

                    progressDialog.setTitle("正在加载");

                    progressDialog.show();

                } else {

                    progressDialog.setProgress(newProgress);

                }

            }

        });

    }

    @Override

    public boolean onKeyDown(int keyCode, KeyEvent event) {

        if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) {

            webView.goBack();

            return true;

        }

        return super.onKeyDown(keyCode, event);

    }

}

Activity3.java

效果：

Android 使用WebView显示网页

相关文章