webview 与 javascript

最新推荐文章于 2024-06-27 14:04:05 发布

llbupt

最新推荐文章于 2024-06-27 14:04:05 发布

阅读量1.7k

点赞数

分类专栏： Android相关文章标签： javascript string android java schema file

本文链接：https://blog.csdn.net/llbupt/article/details/7369178

版权

Android相关专栏收录该内容

8 篇文章 0 订阅

订阅专栏

WebView不但可以运行一段html代码，而且还有一个最重要的特点，就是Webview可以同javascript互相调用。该类实现从android应用中调出个人资料，然后通过javascript显示出来。首先在android中定义一个PersonalData类，用例保存个人资料，并且定义得到这些数据的成员函数，供javascript调用。

package com.android;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class MainActivity 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.webview);
        //设置支持javascript
        mWebView.getSettings().setJavaScriptEnabled(true);
        //把本类的一个实例添加到javascript的全局对象window中
        //这样就使用window.PersonalData来调用它的方法
        mWebView.addJavascriptInterface(this, "PersonalData");
        //加载网页
        mWebView.loadUrl("file:///android_asset/PersonalData.html");
    }
    
    //在javascript脚本中调用得到PersonalData对象
    public PersonalData getPersonalData(){
    	return mPersonalData;
    }
    
    //javascript脚本中调用显示的资料
    class PersonalData{
    	String mId;
    	String mName;
    	String mAge;
    	String mBolg;
    	public PersonalData(){
    		this.mId = "123456";
    		this.mName = "Android";
    		this.mAge = "24";
    		this.mBolg = "http://bbs.csdn.net/";
    	}
    	public String getID()
		{
			return mId;
		}
		public String getName()
		{
			return mName;
		}
		public String getAge()
		{
			return mAge;
		}
		public String getBlog()
		{
			return mBolg;
		}
    }
}

这里需要通过addJavascriptInterface（Object obj，String interfacename）方法将一个java对象绑定到一个javascript对象中，javascript对象名就是interfacename，作用域是global，这样便可以扩展javascript的api，获取android数据。

初始化webview之后，在javascript中就可以使用window.Personal.gePersonalData()来取得java对象

PersonalData.html的内容：

<html>
    <head>
        <script type="text/javascript" src="test.js"/>
</head>
<body>
    <div id = "Personaldata">
        <p> Personal Data </p>
    </div>
</body>
</html>

test.js的代码：

window.οnlοad= function(){
	//取得java对象
    var personaldata = window.PersonalData.getPersonalData();
    if(personaldata)
    {
        var Personaldata = document.getElementById("Personaldata");
	pnode = document.createElement("p");
		//通过java对象访问其数据
        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);
    }    
}

在java代码中也可以直接调用javascript方法，这样就可以互相调用取得数据了，代码如下：
webview.loadUrl("javascript:方法名()"）；
为了让WebView从apl文件中加载assets，android sdk提供了一个schema，前缀为"file:///android_asset/"。webview遇到这样的schema，就去当前包中的assets目录中找内容。所以我们使用了如下的代码来加载一个网页：

mWebView.loadUrl("file:///android_asset/PersonalData.html");

整个项目的代码结构如下：