注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

无线时代辐射无穷

抓紧生宝宝,小心辐射

 
 
 

日志

 
 

WebView本地java方法和js之间的调用  

2011-07-09 18:57:25|  分类: android |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

一、webview相当于android中的浏览器,基于webkit开发,可以浏览网页文件,支持css javascript 以及html

使用webview首先要有以下配置:

1. AndroidManifest.xml中必须注册"android.permission.INTERNET"进行权限许可,(如果只是使用本地HTML,可以不用注册许可权限)否则会出Web page not available错误WebView本地java方法和js之间的调用 - wolfgangkiefer - 南中国海群岛
。 

2.如果在web中使用js需要许可javascript执行:WebView webv =(WebView)findViewById(R.id.webv);//从xml中获取webview

webv.getSettings().setJavaScriptEnabled(true);//允许JS执行

3.如果在用webview做应用的时候我们不希望新建webview进程,让程序跳来跳去那么进行如下设置

webv.setWebViewClient(new WebViewClient(){ 

      public boolean shouldOverrideUrlLoading(WebView view, String url) {

                 view.loadUrl(url);//点击超链接的时候重新在原来进程上加载URL
                 
return true;

     }

});   

4.在做webview开发是经常会加载本机的html文件如下:

file:///android_asset/teste.html   加载项目assets下的文件teste.html

file:///sdcard/index.html       加载sdcard下的index.html文件

5.在javascript中调用java方法

      5.1先将一个当前的java对象绑定到一个javascript上面,使用如下方法

               webv.addJavascriptInterface(this, "someThing");//this为当前对象,绑定到js的someThing上面,主要someThing的作用域是全局的。一旦初始化便可随处运行

      5.2定义被调用的java方法


如下例子

java代码:

package CC.CDC;

 

import android.app.Activity;

import android.os.Bundle;

import android.webkit.WebView;

 

public class SDFSDFSD extends Activity {

    /** Called when the activity is first created. */

WebView webv;

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main); 

        webv = (WebView)findViewById(R.id.webv);

        webv.getSettings().setJavaScriptEnabled(true);

        webv.addJavascriptInterface(this, "someThing");

        webv.loadUrl("file:///android_asset/index.html");

    }

    public void setSmething(String some){

    System.out.println("----------"+some+"---------------");

    }

}

html代码:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<title></title>

<script language="javascript" type="html/text"> 

function dosomething(){

document.getElementById("helloweb").innerHTML="HelloWebView";

}

</script>

</head>

<body onload="javascript:window.someThing.setSmething('HelloWebView')">

<div id="helloweb">

 

</div>

</body>

</html>

此示例的结果就是在html页面加载外之后调用java的 setSmething的方法打印出字符串结果如图WebView本地java方法和js之间的调用 - wolfgangkiefer - 南中国海群岛

java中调用js代码,当然这个也需要触发,现在将上述html中的onload代码改变为onload="javascript:window.someThing.getJsData()"

然后在java中增加如下代码

public void getJsData(){

    webv.loadUrl("javascript:dosomething()");

    }

执行效果如图WebView本地java方法和js之间的调用 - wolfgangkiefer - 南中国海群岛WebView本地java方法和js之间的调用 - wolfgangkiefer - 南中国海群岛



二、从WebView初探 了解到WebView的强大,。听说WebView对Javascript的支持也很强,想从网上找些例子,还很难找,最终从google老家找了一个Java和Javascript互调的例子 ,整个Eclipse ADT工程例子中都有,这里重点分析一下代码:

Java代码
public class WebViewDemo extends Activity {   
    private WebView mWebView;   
    private Handler mHandler = new Handler();   
  
    public void onCreate(Bundle icicle) {   
        super.onCreate(icicle);   
        setContentView(R.layout.webviewdemo);   
        mWebView = (WebView) findViewById(R.id.webview);   
        WebSettings webSettings = mWebView.getSettings();   
        webSettings.setJavaScriptEnabled(true);   
        mWebView.addJavascriptInterface(new Object() {   
            public void clickOnAndroid() {   
                mHandler.post(new Runnable() {   
                    public void run() {   
                        mWebView.loadUrl("javascript:wave()");   
                    }   
                });   
            }   
        }, "demo");   
        mWebView.loadUrl("file:///android_asset/demo.html");   
    }   
}  
public class WebViewDemo extends Activity {   private WebView mWebView;   private Handler mHandler = new Handler();     public void onCreate(Bundle icicle) {    super.onCreate(icicle);    setContentView(R.layout.webviewdemo);    mWebView = (WebView) findViewById(R.id.webview);    WebSettings webSettings = mWebView.getSettings();    webSettings.setJavaScriptEnabled(true);    mWebView.addJavascriptInterface(new Object() {     public void clickOnAndroid() {      mHandler.post(new Runnable() {       public void run() {        mWebView.loadUrl("javascript:wave()");       }      });     }    }, "demo");    mWebView.loadUrl("file:///android_asset/demo.html");   }  }

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


Html代码
<html>  
        <script language="javascript">  
                function wave() {   
                    document.getElementById("droid").src="android_waving.png";   
                }   
        </script>  
        <body>  
            <a onClick="window.demo.clickOnAndroid()">  
                                <img id="droid" src="android_normal.png"/><br>  
                                Click me!   
            </a>  
        </body>  
</html>  
<html>          <script language="javascript">                  function wave() {                      document.getElementById("droid").src="android_waving.png";                  }          </script>          <body>              <a onClick="window.demo.clickOnAndroid()">                                  <img id="droid" src="android_normal.png"/><br>                                  Click me!              </a>          </body>  </html>  

 这样在javascript中就可以调用java对象的clickOnAndroid()方法了,wave()方法是java中调用javascript的例子。

这里还有几个知识点:

1)为了让WebView从apk文件中加载assets,Android SDK提供了一个schema,前缀为"file:///android_asset/"。WebView遇到这样的schema,就去当前包中的assets目录中找内容。如上面的"file:///android_asset/demo.html"

2)addJavascriptInterface方法中要绑定的Java对象及方法要运行另外的线程中,不能运行在构造他的线程中,这也是使用Handler的目的。

  评论这张
 
阅读(2178)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017