Android 原生WebView的使用

Android 原生WebView的使用

Android WebView在Android平台上是一个特殊的View,它用来显示网页,这个WebView类可以被用来显示一张在线的网页,当然还可以用来开发浏览器。
WebView内部实现是采用渲染引擎(WebKit)来展示view的内容,提供网页前进后退,网页放大,缩小,搜索等功能
WebView是一个基于WebKit引擎,展现Web页面的控件,Android的WebView在低版本和高版本采用了不同的WebKit版本内核。
一:WebView的使用
1.在布局文件中添加WebView控件
2.在代码中让WebView控件加载显示网页
添加权限:

public class WebViewActivity extends AppCompatActivity {
    private WebView web_view;
 @Override
 protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_web);
 web_view=findViewById(R.id.web_view);
 //白边问题解决
web_view.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
 web_view.loadUrl("http://www.baidu.com");//跳转到浏览器的百度页面
  //系统默认会通过手机浏览器打开网页,为了能够直接通过WebView显示网页,则必须设置
 web_view.setWebViewClient(new WebViewClient(){
    @Override
 public boolean shouldOverrideUrlLoading(WebView view, String url) {
        //使用WebView加载显示url
 view.loadUrl(url);
 //返回true
 return true;
 }
});
 }
}

webView的常用方法:
//恢复pauseTimers状态
1.web_view.resumeTimers();
//它会暂停所有webview的布局显示、解析、延时,从而降低CPU功耗
2.web_view.pauseTimers();
//激活WebView为活跃状态,能正常执行网页的响应
3.web_view.onResume();
//当页面被失去焦点被切换到后台不可见状态,需要执行onPause()
//通过onPause()动作通知内核暂停所有的动作,比如DOM的解析、JavaScript执行等
4.web_view.onPause();
//webview调用destory时,webview仍绑定在Activity上
//这是由于自定义webview构建时传入了该Activity的context对象
//因此需要先从父容器中移除webview,然后再销毁webview
rootLayout.removeView(web_view);
5.web_view.destroy();
//是否可以后退
6.web_view.canGoBack()
//后退网页
7.web_view.goBack()
//是否可以前进
8.web_view.canGoForward()
//前进网页
9.web_view.goForward()
//清除网页访问留下的缓存
//由于内核缓存是全局的因此这个方法不仅仅针对webview而是针对整个应用程序.
10.web_view.clearCache(true);
//清除当前webview访问的历史记录
//只会webview访问历史记录里的所有记录除了当前访问记录
11.web_view.clearHistory();
//这个api仅仅清除自动完成填充的表单数据,并不会清除WebView存储到本地的数据
12.web_view.clearFormData();

@Override
protected void onPause() {
    super.onPause();
 web_view.onPause();
 //它会暂停所有webview的布局显示、解析、延时,从而降低CPU功耗
 web_view.pauseTimers();
}

@Override
protected void onDestroy() {
    if (web_view!=null){
        web_view.clearHistory();
 ViewGroup parent = (ViewGroup) web_view.getParent();
 parent.removeView(web_view);
 web_view.destroy();
 web_view=null;
 Log.d("aa","webView不为空");
 }
    Log.d("aa","webView为空");
 super.onDestroy();
}


@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if (keyCode==KEYCODE_BACK&&web_view.canGoBack()){
        web_view.goBack();
 return true; }
    return super.onKeyDown(keyCode, event);
}

二:WebViewClient类
WebView常用的子类主要有三个,分别是WebSettings类、WebViewClient类、WebChromeClient类。

WebViewClient用于处理各种通知和请求事件的一些方法。

  • onPageStarted():页面开始加载时调用,这时候可以显示加载进度条,让用户耐心等待页面的加载。
  • onPageFinished():页面完成加载时调用,这时候可以隐藏加载进度条,提醒用户页面已经完成加载。
  • onLoadResource():页面每次加载资源时调用。
  • shouldOverrideUrlLoading():WebView加载url默认会调用系统的浏览器,通过重写该方法,实现在当前应用内完成页面加载。
  • onReceivedError():页面加载发生错误时调用,这时候可以跳转到自定义的错误提醒页面,总比系统默认的错误页面美观,优化用户体验。
  • onReceivedHttpError():页面加载请求时发生错误。
  • onReceivedSslError():页面加载资源时发生错误。
  • shouldOverrideKeyEvent():覆盖按键默认的响应事件,这时候可以根据自身的需求在点击某些按键时加入相应的逻辑。
  • onScaleChanged():页面的缩放比例发生变化时调用,这时候可以根据当前的缩放比例来重新调整WebView中显示的内容,如修改字体大小、图片大小等。
  • shouldInterceptRequest():可以根据请求携带的内容来判断是否需要拦截请求。
WebViewClient webViewClient=new WebViewClient(){
    @Override
 public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
        //页面开始加载时调用,具体加载实现
 }
    @Override
 public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
 return true; }
};

三:WebChromeClient类
此类用于处理网站图标,网站标题,网站弹窗等,以下是相关方法

  • onProgressChanged():页面加载进度发生变化时调用,可以通过该方法实时向用户反馈加载情况,如显示进度条等。
  • onReceivedIcon():接收Web页面的图标,可以通过该方法把图标设置在原生的控件上,如Toolbar等。
  • onReceivedTitle():接收Web页面的标题,可以通过该方法把图标设置在原生的控件上,如Toolbar等。
  • onJsAlert():处理JS的Alert对话框。
  • onJsPrompt():处理JS的Prompt对话框。
  • onJsConfirm():处理JS的Confirm对话框。
  • onPermissionRequest():Web页面请求Android权限时调用。
  • onPermissionRequestCanceled():Web页面请求Android权限被取消时调用。
  • onShowFileChooser():Web页面上传文件时调用。
  • getVideoLoadingProgressView():自定义媒体文件播放加载时的进度条。
  • getDefaultVideoPoster():设置媒体文件默认的预览图。
  • onShowCustomView():媒体文件进入全屏时调用。
  • onHideCustomView():媒体文件退出全屏时调用。
WebChromeClient webChromeClient=new WebChromeClient(){
    @Override
 public void onProgressChanged(WebView view, int newProgress) {
        if (newProgress<100){
            String progress=newProgress+"%";
 tv_progress.setText(progress);
 }else {
            tv_progress.setText("100%");
 }
    }
    @Override
 public void onReceivedTitle(WebView view, String title) {
        tv_title.setText(title);
 }
};

四:WebSettings控件的相关配置

WebSettings webSettings = webView.getSettings();

webSettings.setJavaScriptEnabled(true); -> 是否开启JS支持
webSettings.setPluginsEnabled(true); -> 是否开启插件支持
webSettings.setJavaScriptCanOpenWindowsAutomatically(true); -> 是否允许JS打开新窗口

webSettings.setUseWideViewPort(true); -> 缩放至屏幕大小
webSettings.setLoadWithOverviewMode(true); -> 缩放至屏幕大小
webSettings.setSupportZoom(true); -> 是否支持缩放
webSettings.setBuiltInZoomControls(true); -> 是否支持缩放变焦,前提是支持缩放
webSettings.setDisplayZoomControls(false); -> 是否隐藏缩放控件

webSettings.setAllowFileAccess(true); -> 是否允许访问文件
webSettings.setDomStorageEnabled(true); -> 是否节点缓存
webSettings.setDatabaseEnabled(true); -> 是否数据缓存
webSettings.setAppCacheEnabled(true); -> 是否应用缓存
webSettings.setAppCachePath(uri); -> 设置缓存路径

webSettings.setMediaPlaybackRequiresUserGesture(false); -> 是否要手势触发媒体
webSettings.setStandardFontFamily("sans-serif"); -> 设置字体库格式
webSettings.setFixedFontFamily("monospace"); -> 设置字体库格式
webSettings.setSansSerifFontFamily("sans-serif"); -> 设置字体库格式
webSettings.setSerifFontFamily("sans-serif"); -> 设置字体库格式
webSettings.setCursiveFontFamily("cursive"); -> 设置字体库格式
webSettings.setFantasyFontFamily("fantasy"); -> 设置字体库格式
webSettings.setTextZoom(100); -> 设置文本缩放的百分比
webSettings.setMinimumFontSize(8); -> 设置文本字体的最小值(1~72)
webSettings.setDefaultFontSize(16); -> 设置文本字体默认的大小

webSettings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); -> 按规则重新布局
webSettings.setLoadsImagesAutomatically(false); -> 是否自动加载图片
webSettings.setDefaultTextEncodingName("UTF-8"); -> 设置编码格式
webSettings.setNeedInitialFocus(true); -> 是否需要获取焦点
webSettings.setGeolocationEnabled(false); -> 设置开启定位功能
webSettings.setBlockNetworkLoads(false); -> 是否从网络获取资源

例子:

public class WebViewActivity extends AppCompatActivity {
    private WebView web_view;
 private TextView tv_title,tv_start,tv_progress,tv_end;
 @Override
 protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_web);
 web_view=findViewById(R.id.web_view);
 tv_title=findViewById(R.id.tv_title);
 tv_start=findViewById(R.id.tv_start);
 tv_progress=findViewById(R.id.tv_progress);
 tv_end=findViewById(R.id.tv_end);
 web_view.loadUrl("http://www.baidu.com");//http请求在Android9.0上需要配置的http
 //白边问题解决
 web_view.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
 web_view.setWebViewClient(webViewClient);
 web_view.setWebChromeClient(webChromeClient);
 }
    WebViewClient webViewClient=new WebViewClient(){
        @Override
 public void onPageStarted(WebView view, String url, Bitmap favicon) {
           tv_start.setText("开始加载!");
 }
        @Override
 public void onPageFinished(WebView view, String url) {
            tv_end.setText("加载完成了");
 }
        @Override
 public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
 return true; }
    };
 WebChromeClient webChromeClient=new WebChromeClient(){
        @Override
 public void onProgressChanged(WebView view, int newProgress) {
            if (newProgress<100){
                String progress=newProgress+"%";
 tv_progress.setText(progress);
 }else {
                tv_progress.setText("100%");
 }
        }
        @Override
 public void onReceivedTitle(WebView view, String title) {
            tv_title.setText(title);
 }
    };
 @Override
 protected void onPause() {
        super.onPause();
 web_view.onPause();
 //它会暂停所有webview的布局显示、解析、延时,从而降低CPU功耗
 web_view.pauseTimers();
 }
    @Override
 protected void onDestroy() {
        if (web_view!=null){
            web_view.clearHistory();
 ViewGroup parent = (ViewGroup) web_view.getParent();
 parent.removeView(web_view);
 web_view.destroy();
 web_view=null;
 Log.d("aa","webView不为空");
 }
        Log.d("aa","webView为空");
 super.onDestroy();
 }
    @Override
 public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode==KEYCODE_BACK&&web_view.canGoBack()){
            web_view.goBack();
 return true; }
        return super.onKeyDown(keyCode, event);
 }
}

五:关于Js调用Android

WebSettings webSettings=web_view.getSettings();
// 设置与Js交互的权限
webSettings.setJavaScriptEnabled(true);
// 设置允许JS弹窗
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
web_view.addJavascriptInterface(new AndroidJS(this),"android");//进行对象的映射

编写一个AndroidJS类

public class AndroidJS {
    private Context context;
 public AndroidJS(Context context) {
        this.context = context;
 }
    @JavascriptInterface
 public void callFinish() {
        Log.d("aa","js调用");
 Log.i("callFinish", "Thread:" + Thread.currentThread());
 }
}
//其中 callFinish()是Js那边调用的,调用方式android.callFinish();android是我传进去的键,映射到JS的映射类的对象,名字可以随意取,保持一致就行

对于JS调用Android方式3种:
1.通过WebViewaddJavascriptInterface()进行对象映射(没问题)
2.通过 WebViewClientshouldOverrideUrlLoading ()方法回调拦截 url(有问题,报了"ReferenceError: android is not defined")
3.通过 WebChromeClientonJsAlert()onJsConfirm()onJsPrompt()方法回调拦截JS对话框alert()confirm()prompt() 消息(没有尝试)
对于Android调用JS方式2种:
1.通过WebView的loadUrl()
2.通过WebView的evaluateJavascript()

//Android版本变量
final int version = Build.VERSION.SDK_INT;
// 因为该方法在 Android 4.4 版本才可使用,所以使用时需进行版本判断
if (version<18){
    web_view.loadUrl("url连接");//传入对应的url,
}else {
    web_view.evaluateJavascript("url连接", new ValueCallback() {
        @Override
 public void onReceiveValue(String value) {
            //此处为JS返回的结果
 }
    });
}

结尾:强者无畏

你可能感兴趣的:(android)