您的位置:首页 > 移动开发 > Android开发

Android中WebView与Javascript的交互

2012-09-17 11:14 375 查看
为了方便网页和Android应用的交互,Android系统提供了WebView中JavaScript网页脚本调用Java类方法的机制。只要调用addJavascriptInterface方法即可映射一个Java对象到JavaScript对象上。

1、映射Java对象到JavaScript对象上

mWebView = (WebView) findViewById(R.id.wv_content);

mWebView.setVerticalScrollbarOverlay(true);

final WebSettings settings = mWebView.getSettings();

settings.setSupportZoom(true);

//WebView启用Javascript脚本执行

settings.setJavaScriptEnabled(true);

settings.setJavaScriptCanOpenWindowsAutomatically(true);

//映射Java对象到一个名为”js2java“的Javascript对象上

//JavaScript中可以通过"window.js2java"来调用Java对象的方法

mWebView.addJavascriptInterface(new JSInvokeClass(), "js2java");

/**网页Javascript调用接口**/
class JSInvokeClass {

    public void back() {

        activity.finish();

    }}2、JavaScript调用Java对象示例

调用上述JSInvokeClass类对象的back方法,如下:
window.js2java.back();

另:

1.android中利用webview调用网页上的js代码。

Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true,,然后通过loadUrl就可以直接进行调用,如下所示:

2. 网页上调用android中java代码的方法

在网页中调用java代码,需要在webview控件中添加javascriptInterface。如下所示:

mWebView.addJavascriptInterface(
new 
Object()
{
 
            
public 
void 
clickOnAndroid()
{
 
                
mHandler.post(
new 
Runnable()
{
 
                    
public 
void 
run()
{
                        
Toast.makeText(Test.
this
,
"测试调用java"
,
Toast.LENGTH_LONG).show();
                    
}
                
});
            
}
}, 
"demo"
);


在网页中,只需要像调用js方法一样,进行调用就可以

3. Java代码调用js并传参

首先需要带参数的js函数,如function test(str),然后只需在调用js时传入参数即可,如下所示:

4.Js中调用java函数并传参

首先一样需要带参数的函数形式,但需注意此处的参数需要final类型,即得到以后不可修改,如果需要修改其中的值,可以先设置中间变量,然后进行修改。如下所示:

mWebView.addJavascriptInterface(
new 
Object()
{
 
            
publi
c
void 
clickOnAndroid(final 
int 
i)
{
 
                
mHandler.post(
new 
Runnable()
{
 
                    
public 
void 
run()
{
 
                                
int 
j
= i;
 
                                
j++;
 
Toast.makeText(Test.
this
,
"测试调用java"
+
String.valueOf(j), Toast.LENGTH_LONG).show();
                    
}
                
});
            
}
}, 
"demo"
);


然后在html页面中,利用如下代码

即可实现调用
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: