Examples_08_07

http://yarin.iteye.com/?page=4

Activity01.java

package com.yarin.android.Examples_08_07;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.JavascriptInterface;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;

public class Activity01 extends Activity {
    private WebView mWebView;
    private PersonalData mPersonalData;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mPersonalData = new PersonalData();
        mWebView = (WebView) this.findViewById(R.id.WebView01);
        // 设置支持JavaScript
        mWebView.getSettings().setJavaScriptEnabled(true);
        // 把本类的一个实例添加到js的全局对象window中，
        // 这样就可以使用window.PersonalData来调用它的方法
        mWebView.addJavascriptInterface(this, "PersonalData");
        // 如果不设置这个，JS代码中的按钮会显示，但是按下去却不弹出对话框
        // Sets the chrome handler. This is an implementation of WebChromeClient
        // for use in handling JavaScript dialogs, favicons, titles, and the
        // progress. This will replace the current handler.
        mWebView.setWebChromeClient(new WebChromeClient() {

            @Override
            public boolean onJsAlert(WebView view, String url, String message,
                    JsResult result) {
                // TODO Auto-generated method stub
                return super.onJsAlert(view, url, message, result);
            }

        });
        // 加载网页
        // mWebView.loadUrl("file:///android_asset/PersonalData_new.html");
        mWebView.loadUrl("file:///android_asset/PersonalData.html");
    }

    // 在js脚本中调用得到PersonalData对象
    @JavascriptInterface
    public PersonalData getPersonalData() {
        return mPersonalData;
    }

    // js脚本中调用显示的资料
    class PersonalData {
        String mID;
        String mName;
        String mAge;
        String mBlog;

        public PersonalData() {
            this.mID = "123456789";
            this.mName = "Android";
            this.mAge = "100";
            this.mBlog = "http://yarin.javaeye.com";
        }

        public String getID() {
            return mID;
        }

        public String getName() {
            return mName;
        }

        public String getAge() {
            return mAge;
        }

        public String getBlog() {
            return mBlog;
        }
    }
}

 

PersonalData_new.html

<html>
    <head>
        <script type="text/javascript">
        function showAndroidToast(toast) 
        {
            var personaldata_new = PersonalData.getPersonalData();
            alert(personaldata_new);
            var personaldata = window.PersonalData.getPersonalData();
            if(personaldata)
            {
                    var Personaldata = document.getElementById("Personaldata");
                pnode = document.createElement("p");
                tnode = document.createTextNode("ID:" + personaldata.getID());
                pnode.appendChild(tnode);
                Personaldata.appendChild(pnode);
                pnode = document.createElement("p");
                    tnode = document.createTextNode("Name:" + personaldata.getName());
                pnode.appendChild(tnode);
                Personaldata.appendChild(pnode);
                pnode = document.createElement("p");
                tnode = document.createTextNode("Age:" + personaldata.getAge());
                pnode.appendChild(tnode);
                Personaldata.appendChild(pnode);
                pnode = document.createElement("p");
                tnode = document.createTextNode("Blog:" + personaldata.getBlog());
                pnode.appendChild(tnode);
                    Personaldata.appendChild(pnode);
            }   
        }
        
        
               function myFunction(){
                   console.log("Write a new Line");//调试信息
                   alert("Hello World!");
               }
               
        </script>
</head>
<body>
    <div id = "Personaldata">
        <p> Personal Data </p>
        <button onclick="myFunction()">click here!</button>
        <input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
    </div>
</body>
</html>

 

PersonalData.html

<html>
    <head>
        <script type="text/javascript">
           function onload(){
            var personaldata = window.PersonalData.getPersonalData();
            if(personaldata)
            {
                var Personaldata = document.getElementById("Personaldata");
                pnode = document.createElement("p");
                tnode = document.createTextNode("ID:" + personaldata.getID());
                pnode.appendChild(tnode);
                Personaldata.appendChild(pnode);
                pnode = document.createElement("p");
                tnode = document.createTextNode("Name:" + personaldata.getName());
                pnode.appendChild(tnode);
                Personaldata.appendChild(pnode);
                pnode = document.createElement("p");
                tnode = document.createTextNode("Age:" + personaldata.getAge());
                pnode.appendChild(tnode);
                Personaldata.appendChild(pnode);
                pnode = document.createElement("p");
                tnode = document.createTextNode("Blog:" + personaldata.getBlog());
                pnode.appendChild(tnode);
                Personaldata.appendChild(pnode);
            }   
        } 
        </script>
</head>
<body onload="javascript:onload()">
    <div id = "Personaldata">
        <p> Personal Data </p>
    </div>
</body>
</html>

 或者

<html>
    <head>
        <script type="text/javascript" src="test2.js">
        </script>
</head>
<body onload="javascript:myFunction()">
    <div id = "Personaldata">
        <p> Personal Data </p>
        <button onclick="myFunction()">click here!</button>
    </div>
</body>
</html>

test2.js

function myFunction(){
var personaldata = window.PersonalData.getPersonalData();
    if(personaldata)
    {
        var Personaldata = document.getElementById("Personaldata");
    pnode = document.createElement("p");
        tnode = document.createTextNode("ID:" + personaldata.getID());
        pnode.appendChild(tnode);
        Personaldata.appendChild(pnode);
    pnode = document.createElement("p");
        tnode = document.createTextNode("Name:" + personaldata.getName());
        pnode.appendChild(tnode);
        Personaldata.appendChild(pnode);
    pnode = document.createElement("p");
        tnode = document.createTextNode("Age:" + personaldata.getAge());
        pnode.appendChild(tnode);
        Personaldata.appendChild(pnode);
    pnode = document.createElement("p");
        tnode = document.createTextNode("Blog:" + personaldata.getBlog());
        pnode.appendChild(tnode);
        Personaldata.appendChild(pnode);
    }   
}

或者

<html>
    <head>
        <script type="text/javascript" src="test2.js">
        </script>
</head>
<body><!-- onload="javascript:myFunction()"-->
    <div id = "Personaldata">
        <p> Personal Data </p>
        <button onclick="myFunction()">click here!</button>
    </div>
</body>
</html>

test2.js

window.onload= function(){
var personaldata = window.PersonalData.getPersonalData();
    if(personaldata)
    {
        var Personaldata = document.getElementById("Personaldata");
    pnode = document.createElement("p");
        tnode = document.createTextNode("ID:" + personaldata.getID());
        pnode.appendChild(tnode);
        Personaldata.appendChild(pnode);
    pnode = document.createElement("p");
        tnode = document.createTextNode("Name:" + personaldata.getName());
        pnode.appendChild(tnode);
        Personaldata.appendChild(pnode);
    pnode = document.createElement("p");
        tnode = document.createTextNode("Age:" + personaldata.getAge());
        pnode.appendChild(tnode);
        Personaldata.appendChild(pnode);
    pnode = document.createElement("p");
        tnode = document.createTextNode("Blog:" + personaldata.getBlog());
        pnode.appendChild(tnode);
        Personaldata.appendChild(pnode);
    }   
}

 

 <script type="text/javascript" src="test2.js"/>android2.2兼容，但是android4.1.2不兼容。下面的才兼容android4.1.2

 <script type="text/javascript" src="test2.js"></script>

4.2及以上版本必须在js调用的java方法加上@JavascriptInterface，4.1及以下版本不用加上注释。

 

posted @ 2013-10-27 15:32  唾手可得的树  阅读(175)  评论(0)  编辑  收藏  举报