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

民主与科学

独立之人格,自由之思想

 
 
 

日志

 
 

WebView简介(JavaScripte篇)  

2012-02-12 18:59:55|  分类: Android的UI开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
原文:http://www.cnblogs.com/oakpip/archive/2011/04/08/2009800.html
如果访问的页面中有Javascript,则webview必须设置支持Javascript。
       
webview.getSettings().setJavaScriptEnabled(true); 
我 们来了解一下android中webview是如何支持javascripte自定义对象的,在w3c标准中js有 window,history,document等标准对象,同样我们可以在开发浏览器时自己定义我们的对象调用手机系统功能来处理,这样使用js就可以 为所欲为了。
看一个实例:
WebViewDemoActivity.java文件

package com.teleca.robin;

import android.app.Activity;

import android.os.Bundle;

import android.os.Handler;

import android.util.Log;

import android.webkit.WebSettings;

import android.webkit.WebView;

public class WebViewDemoActivity extends Activity {

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

final static String tag="robin";

WebView mWebView;

Handler mHandler=new Handler();

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

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()");    

                        Log.i(tag,"clickOnAndroid");

                    }       

                });       

            }       

        }, "demo");       

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

}

}

assets\demo.html文件

<html>       

<script language="javascript">

<!--     

function wave() {       

document.getElementById("droid").src="android_wave.png";       

}       

//-->

</script>       

<body>       

<a onClick="window.demo.clickOnAndroid()">       

<img id="droid" src="android_normal.png" mce_src="android_normal.png"/><br>       

Hello,are you all right?       

</a>       

</body>       

</html>

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

   这样在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来进行的。

原文:http://www.cnblogs.com/oakpip/archive/2011/04/10/2011165.html

程序英文原址:http://code.google.com/p/apps-for-android/source/browse/trunk/Samples/WebViewDemo/

我对其进行了修改,并加了简单的注释,这个例子的不仅是对js的操作,它还对android浏览器做了简单的介绍,
这些我会在注释中一一讲解。
Javascript弹出框有如下三种:
JavaScript代码如下:   

alert(); 或alert("alert");

window.confirm("Are you srue?");  

window.prompt("Please input some word";,"this is text");  

WebChromeClient 中对三种dialog进行了捕捉,但不幸的是,并没有回调函数可以使用, 或者说不能获得用户是点击“OK”还是“CANCEL”的操作结果。
个人以为,这些方法的设置是为了对一些涉及到html操作的应用程序进行测试时使用的。
在WebChromeClient中还有以下的方法:
Java代码 
    onProgressChanged(WebView view, int newProgress); 
    onReceivedIcon(WebView view, Bitmap icon); 
    onReceivedTitle(WebView view, String title); 
    onRequestFocus(WebView view); 
    onCloseWindow(WebView window); 
    onProgressChanged(WebView view, int newProgress) 

这些方法的使用我会在以后的博文中讲到.
请大家先看今天讲解的重点
WebViewDemo2Activity.java文件 

package com.teleca.robin;

import android.app.Activity;

import android.app.AlertDialog;

import android.content.DialogInterface;

import android.os.Bundle;

import android.os.Handler;

import android.util.Log;

import android.webkit.JsPromptResult;

import android.webkit.JsResult;

import android.webkit.WebChromeClient;

import android.webkit.WebSettings;

import android.webkit.WebView;

import android.widget.TextView;

public class WebViewDemo2Activity extends Activity {

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

final static String tag="robin";

WebView mWebView;

Handler mHandler=new Handler();

TextView mReusultText;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.webviewdemo2);

mReusultText = (TextView) findViewById(R.id.textView);  

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

        WebSettings webSettings = mWebView.getSettings();

        mWebView.setWebChromeClient(new MyWebChromeClient());  

        webSettings.setJavaScriptEnabled(true);      

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

}

 /** 

     * 继承WebChromeClient类 

     * 对js弹出框时间进行处理 

     *  

     */  

    final class MyWebChromeClient extends WebChromeClient {  

        /** 

         * 处理alert弹出框 

         */  

        @Override  

        public boolean onJsAlert(WebView view,String url, String message,JsResult result) {  

            Log.d(tag,"onJsAlert:"+message);  

            mReusultText.setText("Alert:"+message);  

            //对alert的简单封装  

            new AlertDialog.Builder(WebViewDemo2Activity.this).  

                setTitle("Alert").setMessage(message).setPositiveButton("OK",  

                new DialogInterface.OnClickListener() {  

                    @Override  

                    public void onClick(DialogInterface arg0, int arg1) {  

                       //TODO  

                   }  

            }).create().show();  

            result.confirm();  

            return true;  

        }  

        /** 

         * 处理confirm弹出框 

         */  

        @Override  

        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {  

            Log.d(tag, "onJsConfirm:"+message);  

            mReusultText.setText("Confirm:"+message);  

            result.confirm();  

            return super.onJsConfirm(view, url, message, result);  

        }  

        /** 

         * 处理prompt弹出框 

         */  

        @Override  

        public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {  

            Log.d(tag,"onJsPrompt:"+message);  

            mReusultText.setText("Prompt input is :"+message);  

            result.confirm();  

            return super.onJsPrompt(view, url, message, message, result);  

        }  

    }  

}

demo2.html文件
<html>       
<script language="javascript">
<!--     
    function doAlert() {       
alert("alert");      
}  
function doConfirm() {       
window.confirm("Are you srue?")      
}       
function doPrompt() {       
window.prompt("Please input some word","this is text");  
}  
//-->
</script>       
<body>       
<a onClick="doAlert()">          
alert("this is a alert")   
</a>
<br>
<a onClick="doConfirm()">          
window.confirm("Are you srue?")  
</a>
<br>
<a onClick="doPrompt()">          
window.prompt("Please input some word","this is text")
</a>
<br>      
</body>       
</html> 
  评论这张
 
阅读(874)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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