揭开WebView的神秘面纱系列(一)之WebView简介

齐明

前言

WebView毫不夸张的说就是一个微型的浏览器,WebView让开发者可以在Native中展示Web页面,而在Hybrid方案大行其道的今天,WebView在开发过程中更是扮演着不可或缺的角色,虽然Webiew简单易用,只要简单的创建一个实例,然后调用loadUrl方法就可以运行展示一个Web页面,然而你真的了解Webview吗?它如何与Native交互?又是如何向展示的Web页面去注入JS以达到开发的目的?就让我们跟随这一系列的文章去揭开WebView神秘的面纱。

目录

WebView

    //销毁webview
    public void destroy() {
    }
    
    //load url
    public void loadUrl(String url) {
    }
    
    //加载内容
    public void loadData(String data, String mimeType, String encoding) {
    }
    
    //使用baseUrl加载内容
    public void loadDataWithBaseURL(String baseUrl, String data,
            String mimeType, String encoding, String failUrl) {
    }
    
    //停止加载
    public void stopLoading() {
    }
    
    //重新加载页面
    public void reload() {
    }
    
    //设置可以回退到上一页面
    public boolean canGoBack() {
        return false;
    }
    
    //回退到上一页面
    public void goBack() {
    }
    
    //是否可以前进
    public boolean canGoForward() {
        return false;
    }
    
    //前进一页
    public void goForward() {
    }
    
    // 是否前进或者后退,正表示前进,反之后退
    public boolean canGoBackOrForward(int steps) {
        return false;
    }
    
    // 正表示前进,反之后退
    public void goBackOrForward(int steps) {
    }
    
    //上翻一夜
    public boolean pageUp(boolean top) {
        return false;
    }
    
    //下翻一页
    public boolean pageDown(boolean bottom) {
        return false;
    }

    //请求最近触摸的图像的url,msg.getData()获得
    public void requestImageRef(Message msg) {
    }
    
    //获取页面url
    public String getUrl() {
        return null;
    }
    
    //获取页面标题
    public String getTitle() {
        return null;
    }
    
    //获取页面的Favicon
    public Bitmap getFavicon() {
        return null;
    }
    
    //获取页面加载进度
    public int getProgress() {
        return 0;
    }
    
    //获取页面的高度
    public int getContentHeight() {
        return 0;
    }
    
    //清除缓存
    public void clearCache() {
    }
    
    //清除表单数据
    public void clearFormData() {
    }
    
    //清除浏览历史
    public void clearHistory() {
    }
    
    // 查询文档中是否有图片,查询结果将被发送到msg.getTarget()
    // 如果包含图片,msg.arg1 为1,否则为0
    public void documentHasImages(Message response) {
    }
    
    //设置WebViewClient
    public void setWebViewClient(WebViewClient client) {
    }
    
    //设置WebChromeClient
    public void setWebChromeClient(WebChromeClient client) {
    }
    
    //注入JS对象
    public void addJavascriptInterface(Object obj, String interfaceName) {
    }

      // 移除已注入的Javascript对象,下次加载或刷新页面时生效
    public void removeJavascriptInterface(String name);
    
    // 此函数添加于API19,必须在UI线程中调用,回调也将在UI线程
    public void evaluateJavascript(String script, ValueCallback<String> resultCallback)

WebViewClient

WebViewClient主要是处理各种通知和请求事件

    // 拦截页面加载,返回true表示宿主app拦截并处理了该url,否则返回false由当前WebView处理
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
        return false;
    }
    
    //页面开始加载
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
    }

      //页面完成加载
    public void onPageFinished(WebView view, String url) {
    }

    //页面开始加载资源,其中的url就是资源的url
    public void onLoadResource(WebView view, String url) {
    }

       // 这个回调添加于API23,仅用于主框架的导航
    // 通知应用导航到之前页面时,其遗留的WebView内容将不再被绘制。
    // 这个回调可以用来决定哪些WebView可见内容能被安全地回收,以确保不显示陈旧的内容
    // 它最早被调用,以此保证WebView.onDraw不会绘制任何之前页面的内容,随后绘制背景色或需要加载的新内容。
    // 当HTTP响应body已经开始加载并体现在DOM上将在随后的绘制中可见时,这个方法会被调用。
    // 这个回调发生在文档加载的早期,因此它的资源(css,和图像)可能不可用。
    // 如果需要更细粒度的视图更新,查看 postVisualStateCallback(long, WebView.VisualStateCallback).
    // 请注意这上边的所有条件也支持 postVisualStateCallback(long ,WebView.VisualStateCallback)
    public void onPageCommitVisible(WebView view, String url) {
    }

      //拦截加载的请求,且允许返回数据,这个调用不是在主线程中,所以对ui的操作就不要放在这里。
    @Nullable
    public WebResourceResponse shouldInterceptRequest(WebView view,
            WebResourceRequest request) {
        return shouldInterceptRequest(view, request.getUrl().toString());
    }

    //通知应用加载资源错误
    public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
        if (request.isForMainFrame()) {
            onReceivedError(view,
                    error.getErrorCode(), error.getDescription().toString(),
                    request.getUrl().toString());
        }
    }

      //通知应用发生http错误
    public void onReceivedHttpError(
            WebView view, WebResourceRequest request, WebResourceResponse errorResponse) {
    }

     //是否重新提交表单,默认不重发
    public void onFormResubmission(WebView view, Message dontResend,
            Message resend) {
        dontResend.sendToTarget();
    }

    //将当前url添加到数据库,只会添加一次,回退前进将不会重复添加
    public void doUpdateVisitedHistory(WebView view, String url,
            boolean isReload) {
    }

   //通知应用发生ssl错误,默认行为是取消请求
    public void onReceivedSslError(WebView view, SslErrorHandler handler,
            SslError error) {
        handler.cancel();
    }
    

   //返回false webview处理点击事件,反之webview不处理
    public boolean shouldOverrideKeyEvent(WebView view, KeyEvent event) {
        return false;
    }

    // WebView总是消费按键事件,除非是系统按键或shouldOverrideKeyEvent返回true
    // 此方法在按键事件分派时被异步调用
    public void onUnhandledKeyEvent(WebView view, KeyEvent event) {
        onUnhandledInputEventInternal(view, event);
    }

    /// 通知应用页面缩放系数变化
    public void onScaleChanged(WebView view, float oldScale, float newScale) {
    }

WebSettings

WebSettings 主要用于对WebView进行配置

WebSettings settings = web.getSettings();

// 存储(storage)
// 启用HTML5 DOM storage API,默认值 false
settings.setDomStorageEnabled(true); 
// 启用Application Caches API,必需设置有效的缓存路径才能生效,默认值 false
// 此API已废弃,参考:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Using_the_application_cache
settings.setAppCacheEnabled(true); 
settings.setAppCachePath(context.getCacheDir().getAbsolutePath());

// 定位(location)
settings.setGeolocationEnabled(true);

// 是否保存表单数据
settings.setSaveFormData(true);
// 是否当webview调用requestFocus时为页面的某个元素设置焦点,默认值 true
settings.setNeedInitialFocus(true);  

// 是否支持viewport属性,默认值 false
// 页面通过`<meta name="viewport" ... />`自适应手机屏幕
settings.setUseWideViewPort(true);
// 是否使用overview mode加载页面,默认值 false
// 当页面宽度大于WebView宽度时,缩小使页面宽度等于WebView宽度
settings.setLoadWithOverviewMode(true);
// 布局算法
settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);

// 是否支持Javascript,默认值false
settings.setJavaScriptEnabled(true); 
// 是否支持多窗口,默认值false
settings.setSupportMultipleWindows(false);
// 是否可用Javascript(window.open)打开窗口,默认值 false
settings.setJavaScriptCanOpenWindowsAutomatically(false);

// 资源访问
settings.setAllowContentAccess(true); // 是否可访问Content Provider的资源,默认值 true
settings.setAllowFileAccess(true);    // 是否可访问本地文件,默认值 true
// 是否允许通过file url加载的Javascript读取本地文件,默认值 false
settings.setAllowFileAccessFromFileURLs(false);  
// 是否允许通过file url加载的Javascript读取全部资源(包括文件,http,https),默认值 false
settings.setAllowUniversalAccessFromFileURLs(false);

// 资源加载
settings.setLoadsImagesAutomatically(true); // 是否自动加载图片
settings.setBlockNetworkImage(false);       // 禁止加载网络图片
settings.setBlockNetworkLoads(false);       // 禁止加载所有网络资源

// 缩放(zoom)
settings.setSupportZoom(true);          // 是否支持缩放
settings.setBuiltInZoomControls(false); // 是否使用内置缩放机制
settings.setDisplayZoomControls(true);  // 是否显示内置缩放控件

// 默认文本编码,默认值 "UTF-8"
settings.setDefaultTextEncodingName("UTF-8");
settings.setDefaultFontSize(16);        // 默认文字尺寸,默认值16,取值范围1-72
settings.setDefaultFixedFontSize(16);   // 默认等宽字体尺寸,默认值16
settings.setMinimumFontSize(8);         // 最小文字尺寸,默认值 8
settings.setMinimumLogicalFontSize(8);  // 最小文字逻辑尺寸,默认值 8
settings.setTextZoom(100);              // 文字缩放百分比,默认值 100

// 字体
settings.setStandardFontFamily("sans-serif");   // 标准字体,默认值 "sans-serif"
settings.setSerifFontFamily("serif");           // 衬线字体,默认值 "serif"
settings.setSansSerifFontFamily("sans-serif");  // 无衬线字体,默认值 "sans-serif"
settings.setFixedFontFamily("monospace");       // 等宽字体,默认值 "monospace"
settings.setCursiveFontFamily("cursive");       // 手写体(草书),默认值 "cursive"
settings.setFantasyFontFamily("fantasy");       // 幻想体,默认值 "fantasy"


if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    // 用户是否需要通过手势播放媒体(不会自动播放),默认值 true
    settings.setMediaPlaybackRequiresUserGesture(true);
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // 5.0以上允许加载http和https混合的页面(5.0以下默认允许,5.0+默认禁止)
    settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    // 是否在离开屏幕时光栅化(会增加内存消耗),默认值 false
    settings.setOffscreenPreRaster(false);
}

if (isNetworkConnected(context)) {
    // 根据cache-control决定是否从网络上取数据
    settings.setCacheMode(WebSettings.LOAD_DEFAULT);
} else {
    // 没网,离线加载,优先加载缓存(即使已经过期)
    settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
}

WebChromeClient

WebChromeClient主要是辅助 WebView 处理 Javascript 的对话框,网站图标,网站标题等等

// 获得所有访问历史项目的列表,用于链接着色。
public void getVisitedHistory(ValueCallback<String[]> callback) {
}

// <video /> 控件在未播放时,会展示为一张海报图,HTML中可通过它的'poster'属性来指定。
// 如果未指定'poster'属性,则通过此方法提供一个默认的海报图。
public Bitmap getDefaultVideoPoster() {
    return null;
}

// 当全屏的视频正在缓冲时,此方法返回一个占位视图(比如旋转的菊花)。
public View getVideoLoadingProgressView() {
    return null;
}

// 接收当前页面的加载进度
public void onProgressChanged(WebView view, int newProgress) {
}

// 接收文档标题
public void onReceivedTitle(WebView view, String title) {
}

// 接收图标(favicon)
public void onReceivedIcon(WebView view, Bitmap icon) {
}

// Android中处理Touch Icon的方案
// http://droidyue.com/blog/2015/01/18/deal-with-touch-icon-in-android/index.html
public void onReceivedTouchIconUrl(WebView view, String url, boolean precomposed) {
}

// 通知应用当前页进入了全屏模式,此时应用必须显示一个包含网页内容的自定义View
public void onShowCustomView(View view, CustomViewCallback callback) {
}

// 通知应用当前页退出了全屏模式,此时应用必须隐藏之前显示的自定义View
public void onHideCustomView() {
}


// 显示一个alert对话框
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
    return false;
}

// 显示一个confirm对话框
public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
    return false;
}

// 显示一个prompt对话框
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
    return false;
}

// 显示一个对话框让用户选择是否离开当前页面
public boolean onJsBeforeUnload(WebView view, String url, String message, JsResult result) {
    return false;
}


// 指定源的网页内容在没有设置权限状态下尝试使用地理位置API。
// 从API24开始,此方法只为安全的源(https)调用,非安全的源会被自动拒绝
public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) {
}

// 当前一个调用 onGeolocationPermissionsShowPrompt() 取消时,隐藏相关的UI。
public void onGeolocationPermissionsHidePrompt() {
}

// 通知应用打开新窗口
public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg) {
    return false;
}

// 通知应用关闭窗口
public void onCloseWindow(WebView window) {
}

// 请求获取取焦点
public void onRequestFocus(WebView view) {
}

// 通知应用网页内容申请访问指定资源的权限(该权限未被授权或拒绝)
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public void onPermissionRequest(PermissionRequest request) {
    request.deny();
}

// 通知应用权限的申请被取消,隐藏相关的UI。
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public void onPermissionRequestCanceled(PermissionRequest request) {
}

// 为'<input type="file" />'显示文件选择器,返回false使用默认处理
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
    return false;
}

// 接收JavaScript控制台消息
public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
    return false;
} 

WebView加载页面流程分析

当我们用webveiw来展示页面时,webview到底做了什么,让我们以加载http://www.baidu.com 为例来探索一下,结果如图:

如图我们可以看出了,当我们loadurl一个url是,首先调用shouldInterceptRequest请求资源,然后是onPageStarted,如果发生重定向,调用shouldOverrideUrlLoading,然后调用onPageStarted,接着调用shouldOverrideUrlLoading请求资源,然后就显示onPageFinished,然而后面还在请求资源,看源码发现onPageFinished是由main frame调用,并不是整个页面渲染完成后调用,之后还是在请求资源。

最后

第一篇主要是四个类的方法,可能比较枯燥,但是十分重要,也是Webview的精髓之所在,后面的文章我们会结合具体的实例来说明问题,然而用到的方法还是这上面的方法。更多精彩内容,公众号QStack,追寻最纯粹的技术,享受编程的快乐。

阅读 1.4k
1 声望
0 粉丝
0 条评论
你知道吗?

1 声望
0 粉丝
宣传栏