webView的用法

原创于 2016-01-13 21:34:19 发布 · 505 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Android

本文介绍了一个具体的Android应用案例，展示了如何使用WebView加载网页，并通过Java与JavaScript交互实现页面操作。文章详细解释了WebView的初始化配置过程，包括设置JavaScript支持、处理JavaScript警告框以及通过按钮触发Java调用JavaScript的方法。

package org.mobile.train.day10_qf_webview_introduce;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends Activity {

    private WebView webView;

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

        initViews();
    }

    private void initViews() {
        webView = (WebView) findViewById(R.id.webView);
        //以下方法使WebView支持JS
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setWebChromeClient(new WebChromeClient(){
            /**
             * 对JS中弹出alert进行拦截
             */
            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                result.confirm();
                Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();
                return true;
            }
        });
        //让我们自己的WebView充当打开新的网页的客户端
        webView.setWebViewClient(new WebViewClient());

        /**
         * WebView通过loadData的方式加载html标签， 但是不支持中文
         * data 字符串内涵标签
         * mimeType 数据文本类型
         * encoding 编码格式
         */
        /**webView.loadData("<form>用户名<input type='text' name=''><br>"
                + "密码<input type='text' name=''><br>"
                + "<input type='submit' value='登陆'></form>", "text/html", "UTF-8");*/

        /**webView.loadDataWithBaseURL(null, "<img src='http://www.baidu.com/img/bdlogo.gif'>"
                + "<img src='file:///android_asset/axing/img021.jpg'><br>"
                + "<form>用户名<input type='text' name=''><br>"
                + "密码<input type='text' name=''><br>"
                + "<input type='submit' value='登陆'></form>", "text/html", "UTF-8", null);*/

        /**
         * 使用WebView.loadUrl的方式加载本地html文件或者具体的网址
         */
        //webView.loadUrl("file:///android_asset/login.html");
        webView.loadUrl("http://www.baidu.com");
    }

    /**
     * 某一个实体键被按下时， 会被触发
     */
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if(keyCode == event.KEYCODE_BACK && webView.canGoBack()){
            webView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
}

package com.example.day10_qf_webview_java_js;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Toast;

public class MainActivity extends Activity {

    private WebView webView;

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

        initViews();
    }

    @SuppressLint("JavascriptInterface")
    private void initViews() {
        webView = (WebView) findViewById(R.id.webView);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("file:///android_asset/index.html");

        webView.addJavascriptInterface(this, "javaNativeInterface");
    }

    @JavascriptInterface
    public void callbackInJava(final String stringFromJS){
        Toast.makeText(this, stringFromJS, Toast.LENGTH_SHORT).show();
    }

    public void btnClicked(View view){
        //Java中调用JS代码
        webView.loadUrl("javascript:funcInJs('这是从JAVA传过来的值')");
    }


}

html中的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<div id="oDiv" style="font-size:50px">我要Toast</div>
<div id="msg"></div>
<script type="text/javascript">
function funcInJs(str){
    var msg = document.getElementById("msg");
    msg.innerHTML = str;
}

var oDiv = document.getElementById("oDiv");
oDiv.onclick = function(){
    javaNativeInterface.callbackInJava("我是从JS来的小白，请大家多多关照");
}
</script>
<body>

</body>
</html>

标签

#webview