Android WebView 浅谈

原创 2016年06月01日 16:41:52

这篇文章主要是说一下自己在实践过程中遇到的问题,以及解决方案。从以下2点开始阐述。
1.如何与后台交互
2.title和回退箭头的设置

首先,我们不可能只加载一个静态的h5页面,必须要与后台交互,才能更好的展现我们要展现的东西,下面开始说我的做法。

第一步当然是要加载我们的页面

mWebView.loadUrl(mWebUrl);

第二步是设置webview的属性(根据需求来设置,不过一般也没什么问题)

mWebView.getSettings().setJavaScriptEnabled(true);//设置可以识别JavaScript
        mWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
        //mWebView.getSettings().setPluginsEnabled(true);
        //mWebView.getSettings().setPluginState(PluginState.ON);
        mWebView.getSettings().setAllowFileAccess(true);
        mWebView.getSettings().setUseWideViewPort(true);
        mWebView.getSettings().setLoadWithOverviewMode(true);
        mWebView.getSettings().setDomStorageEnabled(true);

        mWebView.getSettings().setSupportZoom(true);
        mWebView.getSettings().setBuiltInZoomControls(true);

        mWebView.clearCache(true);
        //这里是进度条(在导航栏和webview之间可以加一个rogressBar)
        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                mProgressBar.setProgress(newProgress);
                if (newProgress == 100) {
                    mProgressBar.setVisibility(View.GONE);
                } else {
                    mProgressBar.setProgress(newProgress);
                    mProgressBar.postInvalidate();
                }
                super.onProgressChanged(view, newProgress);
            }
        });

第三步就是重点了,咱们要开始和后台交互了,那到底要怎么交互呢?大家仔细看会发现我设置webview的时候有一句代码

mWebView.getSettings().setJavaScriptEnabled(true);//设置可以识别JavaScript

对!没错,这仅仅是可以识别js代码,但是js要调用我们的java代码还得再加一句

    mWebView.addJavascriptInterface(new JsInterface(getActivity()), "AndroidWebView");

好,我们对网页开启了我们的权限之后,接下来就要开始通信了,我们先让js调用我们的方法,下面是我JsInterface的类。

private class JsInterface {
        private Context mContext;

        public JsInterface(Context context) {
            this.mContext = context;
        }

        //在js中调用window.AndroidWebView.showInfoFromJs(name),便会触发此方法。
        @JavascriptInterface
        public void showInfoFromJs(final String biaoti, final String url, final String description){
            Toast.makeText(mContext, title+"~~~~"+url, Toast.LENGTH_SHORT).show();
        }
    }

接下来我们调用js的方法:

//在java中调用js代码
    public void sendInfoToJs() {
        //调用js中的函数:showInfoFromJava(msg)
        String name="lalala";
        mWebView.loadUrl("javascript:showInfoFromJava('" + name + "')");
    }

到这里为止,我们已经可以和js通信了。但是又会出来新的问题,就是当我们在h5页面里多次点击,跳转多次页面之后,我们该如何控制导航栏的title名称以及是否加入回退键呢?这就是我们要解决的第二个问题。

mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    back.setVisibility(View.VISIBLE);
    view.loadUrl(url);
    return false;
}
});

根据使用这个方法的经历,它在加载下一个h5页面的时候会执行,也就是说只要这个方法执行,那我们就可以给导航栏加一个回退箭头。话是这样没错,但是我还遇到了一个小插曲,就是h5前端没有做防刷新的处理,界面刷新了以后也是会执行,但是并没有进入下一个页面,出现回退箭头就很尴尬了,这一点一定要注意!

然后我发现WebViewClient还有一个方法,就是页面加载完成的方法,这样我们可以设置导航栏的title。

@Override
public void onPageFinished(WebView view, String url) {
    tv_title.setText(view.getTitle());
}

对,没错,在这里我们就设置好了我们的头部。不过这里也有一个大坑存在!大家请注意,这个方法貌似会执行2次,一次是已经加载好的页面,一次是要进入的下一个界面,我本来想在这里隐藏和显示回退箭头的,但是执行2次到了最顶层的时候箭头会出现一种情况,“回退图标隐藏闪烁”,这个效果就很差了。我们只能用取巧的方式来解决,但是这里一定要注意。

接下来就是回退箭头的处理了,我给回退箭头加了一个事件来处理这层逻辑。

switch (v.getId()){
case R.id.back:
        if(mWebView.canGoBack()){
                mWebView.goBack();
            if(!mWebView.canGoBack()){
                back.setVisibility(View.GONE);
            }
        }
        break;
}

简单说一下这里的逻辑,canGoBack方法是判断能否返回上一页,GoBack的意思也就很清楚了。这段代码的逻辑就是:当我能回退的时候我先返回上一页,返回以后我再查看webview是否能再返回,如果没有上一页了就隐藏回退箭头,到这里为止,我们已经大概能满足我们的需求了。

不过在网上查资料的过程中,貌似webview的问题很多,这里分享一个别人的博客供大家学习。
http://blog.csdn.net/t12x3456/article/details/13769731/

相关文章推荐

Android:最全面的 Webview 详解

前言 现在很多App里都内置了Web网页(Hyprid App),比如说很多电商平台,淘宝、京东、聚划算等等,如下图 那么这种该如何实现呢?其实这是Android里一个叫WebView的组件实现的。今...

Android WebView常见问题及解决方案汇总

Android WebView常见问题及使用注意事项汇总 就目前而言,如何应对版本的频繁更新呢,又如何灵活多变地展示我们的界面呢,这又涉及到了web app与native app之间孰优孰劣的争论. ...
  • t12x3456
  • t12x3456
  • 2013年11月05日 09:26
  • 187837

Android——使用WebView显示网页

1.引言:通过Intent调用系统浏览器 Uri uri = Uri.parse(url); //url为你要链接的地址 Intent intent = new Intent(Intent.ACT...
  • S415X
  • S415X
  • 2016年08月19日 17:07
  • 3519

android WebView总结

浏览器控件是每个开发环境都具备的,这为马甲神功提供了用武之地,windows的有webbrowser,android和ios都有webview。只是其引擎不同,相对于微软的webbrowser,and...

Android WebView 开发详解(二)

分享Android WebView 开发实战经验,WebView的各种主要的回调说明,详解回调的含义和用途,以及应用程序需要如何响应这些操作。...
  • typename
  • typename
  • 2014年10月17日 18:02
  • 67979

android webview用法小结1

将webview里常用的东西拿出来分享下 想要webview加载页面,只需webView.loadUrl("http://m.baidu.com");当然别忘了添加网络权限 此时点击网页里的超...

Android WebView使用

android webview载入html webview js与本地程序互动 android java层代码调用WebViewjs webview中js回调java方法...

Android WebView技术详解和经验分享

这篇文章是我在做Android JSAPI的时候积累的富贵经验,详细的分析了Android WebView的多种常用功能,满满的都是干货,希望能对正在做Android WebView开发的同学有所帮助...
  • kgdwbb
  • kgdwbb
  • 2017年01月08日 17:01
  • 582

Android WebView 开发详解(三)

介绍Android WebView 开发的WebSetting,详解settings当中困惑的地方以及对开发的提醒。并且分析Android 4.0以上版本针对WebSettings这一部分的具体实现。...
  • typename
  • typename
  • 2014年10月21日 13:34
  • 20907

Android:你要的WebView与 JS 交互方式 都在这里了

前言 现在很多App里都内置了Web网页(Hyprid App),比如说很多电商平台,淘宝、京东、聚划算等等,如下图上述功能是由Android的WebView实现的,其中涉及到Android客户端与W...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android WebView 浅谈
举报原因:
原因补充:

(最多只允许输入30个字)