android基础---->WebView的使用

webView的使用

我们通过一个小的测试程序来体会webView的简单使用，项目结构如下：

一、 webView加载页面，重写shouldOverrideUrlLoading方法，不使用系统默认的浏览器：

private WebView webView;
private EditText editText;
private String htmlUrl = "file:///android_asset/index.html";

private void initComponent() {
    webView = (WebView) findViewById(R.id.webView);
    editText = (EditText) findViewById(R.id.editText);
}

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initComponent();

    webView.getSettings().setJavaScriptEnabled(true); // 支持javascript
    webView.setWebViewClient(new WebViewClient() {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url); // 根据传入的参数再去加载新的网页
            return true; // 表示当前WebView可以处理打开新网页的请求，不用借助系统浏览器
        }
    });
}

二、用webView加载url资源：

// 请求url资源：
public void searchURL(View view) {
    String urlStr = editText.getText().toString();
    webView.loadUrl(htmlUrl);
}

三、用webView加载数据：

// 加载html代码片断
public void loadDataMethod(View view) {
    String summary = "<html><body>You scored <b>192</b> points.</body></html>";
    webView.loadData(summary, "text/html", "utf-8");
}

四、我们还可心在请求的html资源中，加入带有andoroid支持的JS代码。例如在js中使用toast，首先我们定义一个类，供在js中调用：

public class AppUseJSInterface {
    Context mContext;

    AppUseJSInterface(Context c) {
        mContext = c;
    }

    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_LONG).show();
    }
}

接着我们在android代码中使用addJavascriptInterface方法，关联js与android：

// 请求html资源,在js中使用android
public void searchHTML(View view) {
    // 给这个对象起的别名叫“huhxJS”
    webView.addJavascriptInterface(new AppUseJSInterface(this), "huhxJS");
    webView.loadUrl(htmlUrl);
}

最后我们在js中使用android定义的接口：

<script type="text/javascript">
    function androidJS() {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        huhxJS.showToast("username: " + username + ", password: " + password);
    }
</script>

五、我们还可以在andoird中调用js代码，如下：

在android调用js中的javascriptJS函数：

// 在android中调用js
public void useJSInAndroid(View view) {
    String name = "I love you";
    webView.loadUrl("javascript:javascriptJS('" + name + "')");
}

在js中定义javascriptJS()函数:

function javascriptJS(some) {
    huhxJS.showToast(some);
}

六、实现webView的回退功能：

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    // Check if the key event was the Back button and if there's history
    if ((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()) {
        webView.goBack();
        return true;
    } else if (keyCode == KeyEvent.KEYCODE_FORWARD && webView.canGoForward()) {
        webView.goForward();
        return true;
    }
    return super.onKeyDown(keyCode, event);
}

七、测试加载用的页面：index.html

<html>
    <head>
        <script type="text/javascript">
            function androidJS() {
                var username = document.getElementById("username").value;
                var password = document.getElementById("password").value;
                huhxJS.showToast("username: " + username + ", password: " + password);
            }
            function javascriptJS(some) {
                huhxJS.showToast(some);
            }
        </script>
    </head>
    <body>
        <form action="#" method="get">
            <font color="red">username:</font> <input type="text" id="username" name="username"><br>
            <font color="red">password:</font> <input type="password" id="password" name="password"><br>
            <input type="submit" value="submit">
        </form>
    <Button onclick="androidJS()">ClickOnMe</Button>
    </body>
</html>

android基础---->WebView的使用

webView的使用

友情链接