美文网首页
WebView的使用总结

WebView的使用总结

作者: Gunter1993 | 来源:发表于2017-04-24 20:35 被阅读20次

    一、配置WebView

    setWebViewClient:对webview页面加载管理、如url重定向
    setWebChromeClient:主要是对js交互的处理。比如说:对话框、title、页面加载进度条等等。
    </br>

    二、WebView与H5页面的交互方式

    很多情况下,js的交互都可以直接扔到WebView上自动处理。但有一些特殊情况,比如说:点击h5页面的按钮跳转去android原生页面,或者h5页面中选择手机中图片作为用户头像等等。遇到这些问题,其实方案还是蛮多的。

    方案一:

    使用浏览器的开发者工具查看点击时的产生的url或js处理,然后通过我们的shouldOverrideUrlLoading回调函数进行处理。或者可以找前端同学约定好url格式为[scheme_name]:[params],举个栗子吧:
    前端代码:document.location = "js://demo?arg1=111"; 或者<a href="js://demo?arg1=111">跳转</a>,这时候我们就可以在shouldOverrideUrlLoading(webView, url)对url"js://demo?arg1=111"进行判断处理了。

    // 示例代码:
    @Override
    public boolean shouldOverrideUrlLoading(WebView webView, String url) {
        if(mInnerRedirect && StringUtil.isHttpUrl(url)){
            webView.loadUrl(url);
            return true;
        }
        // 处理前端定义好的JS协议(url)
        boolean isIntercepted = ProtocolManager.getInstance().processProtocol(mActivity,mWebView,url);
        return isIntercepted;
    }
    
    //上面ProtocolManager中的processProtocol方法
    public boolean processProtocol(Context context, WebView webView, String url) {
        if(context == null || TextUtils.isEmpty(url)) {
            return false;
        }
    
        String pureUrl;
        Map<String, String> paramMap = null;
        int paramIndex = url.indexOf('?');
        if(paramIndex != -1){
            pureUrl = url.substring(0,paramIndex);
            paramMap = StringUtil.extractParams(url);
        } else {
            pureUrl = url;
        }
    
        if(pureUrl.endsWith("/")) {
            pureUrl = pureUrl.substring(0,pureUrl.length() - 1);
        }
    
        if(paramMap == null) {
            paramMap = new HashMap<>(0);
        }
        for(IProtocolProcessor processor : mProcessorList) {
            if(processor.process(context,webView,url,pureUrl,paramMap)) {
                return true;
            }
        }
        return false;
    }
    
    

    方案二:

    使用谷歌推荐的webview.addJavascriptInterface(JavascriptInterface, obj_name),自定义一个JavascriptInterface以及相应的js代码。
    比如点击webview中图片,然后本地显示大图的代码:

    public class JavascriptInterface {
    
        @android.webkit.JavascriptInterface
        public void startPhotoActivity(String imageUrl) {
            Log.e("webView", "JavascriptInterface : " + imageUrl);
            Intent intent = new Intent(MainActivity.this, PhotoActivity.class);
            intent.putExtra("image_url", imageUrl);
            startActivity(intent);
        }
    }
    
    wvTest.addJavascriptInterface(new JavascriptInterface(),"mainActivity");
    
    // JS代码
    function()  {  
        // 获取"img"标签的对象的集合  
        var imgs = document.getElementsByTagName("img");  
        for(var i = 0; i < imgs.length; i++)  {  
            // 添加点击事件  
            imgs[i].onclick = function()  {  
            // "mainActivity"是在上面Java代码中创建的  
                mainActivity.startPhotoActivity(this.src);  
            }  
        }  
    }
    

    方案三:

    WebChromeClient提供了不少高级交互的回调函数,如:onShowFileChooser、onJsAlert、onProgressChanged等等。百度首页的搜索栏上有个图片上传搜索功能,当被点击时就会触发onShowFileChooser函数

    //todo 加载进度条

    //todo 下载

    //todo 浏览位置

    //todo 错误处理

    //todo 字体

    //todo 性能优化

    相关文章

      网友评论

          本文标题:WebView的使用总结

          本文链接:https://www.haomeiwen.com/subject/grupzttx.html