Android WebView使用

最新推荐文章于 2024-03-19 11:06:52 发布

DoRemix

最新推荐文章于 2024-03-19 11:06:52 发布

阅读量713

点赞数

文章标签： android开发 WebView

本文链接：https://blog.csdn.net/xj626361950/article/details/42915585

版权

在Android手机中内置了一款高性能webkit内核浏览器，在SDK中封装为一个叫做WebView组件。

什么是webkit

WebKit是Mac OS X v10.3及以上版本所包含的软件框架（对v10.2.7及以上版本也可通过软件更新获取）。同时，WebKit也是Mac OS X的Safari网页浏览器的基础。WebKit是一个开源项目，主要由KDE的KHTML修改而来并且包含了一些来自苹果公司的一些组件。

传统上，WebKit包含一个网页引擎WebCore和一个脚本引擎JavaScriptCore，它们分别对应的是KDE的KHTML和KJS。不过，随着JavaScript引擎的独立性越来越强，现在WebKit和WebCore已经基本上混用不分（例如Google Chrome和Maxthon 3采用V8引擎，却仍然宣称自己是WebKit内核）。

这里我们初步体验一下在android是使用webview浏览网页，在SDK的Dev Guide中有一个WebView的简单例子。

在开发过程中应该注意几点：
1.AndroidManifest.xml中必须使用许可"android.permission.INTERNET",否则会出Web page not available错误。
2.如果访问的页面中有Javascript，则webview必须设置支持Javascript。
webview.getSettings().setJavaScriptEnabled(true);

3.如果页面中链接，如果希望点击链接继续在当前browser中响应，而不是新开Android的系统browser中响应该链接，必须覆盖 webview的WebViewClient对象。

mWebView.setWebViewClient(new WebViewClient(){       
                    public boolean shouldOverrideUrlLoading(WebView view, String url) {       
                        view.loadUrl(url);       
                        return true;       
                    }       
        });

4.如果不做任何处理，浏览网页，点击系统“Back”键，整个Browser会调用finish()而结束自身，如果希望浏览的网页回退而不是推出浏览器，需要在当前Activity中处理并消费掉该Back事件。

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

下一步让我们来了解一下android中webview是如何支持javascripte自定义对象的，在w3c标准中js有 window，history，document等标准对象，同样我们可以在开发浏览器时自己定义我们的对象调用手机系统功能来处理，这样使用js就可以为所欲为了。

看一个实例：

package com.example.hello;
 
import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
 
public class WordActivity extends Activity {
    private WebView webview;// 声明一个webview
    private String url="http://www.baidu.com/";
    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.asd);
          //实例化WebView对象 
        webview = (WebView)findViewById(R.id.webView1); 
        //设置WebView属性，能够执行Javascript脚本 
        webview.getSettings().setJavaScriptEnabled(true); 
        //加载需要显示的网页 
        webview.loadUrl("file:///android_asset/index.html");
         
        //设置Web视图 
        webview.setWebViewClient(new HelloWebViewClient());
    }
      //Web视图 
    private class HelloWebViewClient extends WebViewClient { 
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) { 
            view.loadUrl(url); 
            return true; 
        } 
    } 
}

我们看addJavascriptInterface(Object obj,String interfaceName)这个方法，该方法将一个java对象绑定到一个javascript对象中，javascript对象名就是 interfaceName（demo），作用域是Global。这样初始化webview后，在webview加载的页面中就可以直接通过 javascript:window.demo访问到绑定的java对象了。来看看在html中是怎样调用的。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
        <title>用户登录</title>
         
        <link rel="stylesheet" type="text/css" href="/CSS/lofter.css" />
        <link rel="stylesheet" type="text/css" href="/CSS/Bootstrap/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="/CSS/Animate/animate-background-image.css" />
 
        <style type="text/css">
 
            html{
                width: 100%;
                height: 100%;
                 
            }
            body{
                width: 100%;
                height: 100%;
                background-color: #f5f5f5;
            }
            .logo h2{
                font-family: Consolas, '微软雅黑', 'Microsoft YaHei';
                font-weight: 500;
            }
            .login-panel{
                box-shadow: none;
                background-color: rgba(51, 51, 51, 0.6);
            }
            .login-panel p,
            .login-panel h2,
            .login-panel label{
                color: #FFF;
            }
            .login-panel div.blue-border{
                border: none;
                box-shadow: none;
            }
            a.ifotgot{
                margin-right: 8px;
                color: #FFF;
                text-decoration: none;
            }
            a.ifotgot:hover{
                margin-right: 8px;
                color: #3498DB;
            }
 
        </style>
    </head>
 
    <body>
        <div class='main'>
            <form action='' method='post' class='login-panel bg-simple'>
                <div class='logo'>
                    <h2 class='text-center'>登录系统</h2>
                </div>
 
                <div class='form-block'>
                    <label for='uname'>用户名</label>
                    <div class='li-block'>
                        <input tabIndex="1" type='text' name='username' id='uname' placeholder='请输入用户名' value='' />
                    </div>
                </div>
 
                <div class='form-block'>
                    <label for='passwd'>密码</label>
                    <!--<a href="/Member/password/index.html" class='ifotgot pull-right'>忘记密码</a>-->
                    <div class='li-block'>
                        <input tabIndex="2" type='password' name='password' id='passwd' placeholder='请输入密码' value='' />
                    </div>
                </div>
 
                <div class='label-block'>
                    <input style='margin-left:13px;' id='auto_login' type='checkbox' name='auto_login' value='0' >
                    <label for='auto_login'>自动登录</label>
                </div>
                 
                <div class='form-block' id='error' style='display:none;'>
                    <p class='text-center' style='margin-left:13px;color:#E74C3C;'>登录失败，请检查用户名密码是否正确</p>
                </div>
 
                <div class='form-block'>
                    <button type='button' class='info-btn' onClick='doLogin()' style='width: 100%;'>
                        <span>登录</span>
                    </button>
                </div>
            </form>
        </div>
 
        <script type="text/javascript" src="/JS/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src='/JS/cookie.js'></script>
        <script type="text/javascript" src='/JS/effects.js'></script>
         
    </body>
</html>

这样在javascript中就可以调用java对象的clickOnAndroid()方法了，同样我们可以在此对象中定义很多方法（比如发短信，调用联系人列表等手机系统功能。）,这里wave()方法是java中调用javascript的例子。

这里还有几个知识点：

1)为了让WebView从apk文件中加载assets，Android SDK提供了一个schema，前缀为"file:///android_asset/"。WebView遇到这样的schema，就去当前包中的 assets目录中找内容。如上面的"file:///android_asset/index.html"
2)addJavascriptInterface方法中要绑定的Java对象及方法要运行另外的线程中，不能运行在构造他的线程中，这也是使用 Handler的目的。

运行程序后的效果图：