`
wangzt_2008
  • 浏览: 44361 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

webview使用概述

阅读更多

 

大部分内容为网上整理其它高人的帖子,现只作整理,用于查看:

在Android手机中内置了一款高性能webkit内核浏览器,在SDK中封装为一个叫做WebView组件。 

什么是webkit
 

WebKit是Mac OS X v10.3及以上版本所包含的软件框架(对v10.2.7及以上版本也可通过软件更新获取)。 同时,WebKit也是Mac OS X的Safari网页浏览器的基础。WebKit是一个开源项目,主要由KDE的KHTML修改而来并且包含了一些来自苹果公司的一些组件。
 

传统上,WebKit包含一个网页引擎WebCore和一个脚本引擎JavaScriptCore,它们分别对应的是KDE的KHTML和KJS。不过, 随着JavaScript引擎的独立性越来越强,现在WebKit和WebCore已经基本上混用不分(例如Google Chrome和Maxthon 3采用V8引擎,却仍然宣称自己是WebKit内核)。
 

这里我们初步体验一下在android是使用webview浏览网页,在SDK的Dev Guide中有一个WebView的简单例子 。
 

在开发过程中应该注意几点:
 
    1.AndroidManifest.xml中必须使用许可"android.permission.INTERNET",否则会出Web page not available错误。
    2.如果访问的页面中有Javascript,则webview必须设置支持Javascript。
        webview.getSettings().setJavaScriptEnabled(true);  
    3.如果页面中链接,如果希望点击链接继续在当前browser中响应,而不是新开Android的系统browser中响应该链接,必须覆盖 webview的WebViewClient对象。

 

mWebView.setWebViewClient(new WebViewClient(){       
                    public boolean shouldOverrideUrlLoading(WebView view, String url) {       
                        view.loadUrl(url);       
                        return true;       
                    }       
        }); 

 

4.如果不做任何处理,浏览网页,点击系统“Back”键,整个Browser会调用finish()而结束自身,如果希望浏览的网 页回退而不是推出浏览器,需要在当前Activity中处理并消费掉该Back事件。

public boolean onKeyDown(int keyCode, KeyEvent event) {       
        if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {       
            mWebView.goBack();       
                   return true;       
        }       
        return super.onKeyDown(keyCode, event);       
    }

 

下一步让我们来了解一下android中webview是如何支持javascripte自定义对象的,在w3c标准中js有 window,history,document等标准对象,同样我们可以在开发浏览器时自己定义我们的对象调用手机系统功能来处理,这样使用js就可以 为所欲为了。

  看一个实例:

view plaincopy to clipboardprint?
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(demo),作用域是Global。这样初始化webview后,在webview加载的页面中就可以直接通过 javascript:window.demo访问到绑定的java对象了。来看看在html中是怎样调用的。

<html>       
        <mce:script language="javascript"><!--     
       
                function wave() {       
                    document.getElementById("droid").src="android_waving.png";       
                }       
             
// --></mce:script>       
        <body>       
            <a onClick="window.demo.clickOnAndroid()">       
                                <img id="droid" src="android_normal.png" mce_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的目的。

 

 

分享到:
评论
1 楼 hubenshan 2011-10-19  
有没有更深一层的,这个层面的东西多了~

相关推荐

    react-native-android-fullscreen-webview:在Android上支持全屏视频的React Native WebView组件

    iOS默认情况下支持此行为,因此将仅使用本机iOS WebView。 入门 yarn add hummingbird-me/react-native-android-fullscreen-webview 自动链接库 react-native link 更新AndroidManifest.xml 在您的主要活动下,...

    误区:Rust for Tauri中的微型跨平台WebView库。 [在制品]

    Wry连接每个平台上的Web引擎,并提供易于使用的统一界面来呈现WebView。 它在大多数平台上使用 ,在Linux上使用进行Windows创建。 用法 最小示例如下所示: use wry :: {Application, Result }; fn main () -&gt; ...

    XWebViewAssistant:供Android开发人员使用WebView的库

    概述 XWebViewAssistant 提供给Android开发者更简单的WebView开发方式,基于Android原生WebView,轻量封装相关操作 链式调用,初始化WebView 更简洁 无Activity或者Fragment 基类,不需要继承,在任何页面都可以直接...

    灵活易用的WebView库-Android开发

    与API级别17 RTL兼容的快速概述支持全屏模式的多主题支持sh Extra WebView Library灵活而易于使用的WebView库,具有精美的主题。 与API级别17 RTL兼容的快速概述,支持全屏模式共享的多主题支持,URL便捷方式搜索,...

    Android开发笔记之探秘WebView

    概述:  一个显示网页的视图。这个类是你可以滚动自己... 需要注意的是:为了让你的应用能够使用WebView访问互联网和加载网页,你必须添加Internet的权限在Android Manifest文件中: 类结构: java.lang.Object

    javafx-websocket-test:从 JavaFX 客户端使用 WebSocket 的示例项目

    概述 在 JavaFX 客户端应用程序中使用 WebSocket 客户端的示例。 该项目使用。 描述 创建一个场景,用户可以在其中输入他们的姓名,然后向 WebSocket 服务器提交请求,该服务器将响应Hello &lt;name&gt; ,其输出记录在...

    TkinterWeb:Tkhtml3的Python绑定

    概述 TkinterWeb提供了来自的Tkhtml3小部件的绑定,该绑定使得可以将HTML和CSS代码加载到Tkinter应用程序中。 同时支持Python 2和Python 3以及MacOS,Windows和Linux。 用法 TkinterWeb可以在任何Tkinter应用程序中...

    Visual Foxpro 6 0教程 html格式

    第一节 Xbase系列数据库产品概述  数据库理论的研究在七十年代后期进入较为成熟的阶段,随着八十年代初 IBM/PC及其兼容机的广泛使用,数据库产品的代表作之一,Ashton-Tate公司开发的dBASE很快进入微机世界,成为...

    android(下)复习总结

    四、 使用WebView显示网页 28 第四章:管理Android系统桌面 31 一、 管理壁纸 31 二、 管理快捷方式 33 三、 管理桌面控件 34 第五章:传感器开发 37 一、 传感器概述 37 二、 常用传感器 39 第六章:GPS应用开发 41...

    空值-Android开发

    WebView-Local-Server概述此库的目的是允许在http:// URL下托管本地内容(例如资产或资源)。 访问本地资源的传统方法是使用file:/// androi重要信息该项目已存档,不再维护。 请改用官方的AndroidX API androidx....

    移动应用开发:从概念到实现的完整指南.docx

    摘要: 移动应用已经成为人们日常生活和工作中不可或缺的一部分,而移动应用开发...混合开发技术:混合应用开发可以使用Web技术(如HTML、CSS、JavaScript)开发应用,并通过WebView组件嵌入原生应用中。常用的混合

    疯狂Android讲义源码

     13.4.1 使用WebView浏览网页 506  13.4.2 使用WebView加载HTML  代码 507  13.5 使用Web Service进行  网络编程 508  13.5.1 Web Service简介 509  13.5.2 Web Service平台概述 510  13.5.3 使用Android...

    疯狂Android讲义.part2

    13.4.1 使用WebView浏览网页 506 13.4.2 使用WebView加载HTML 代码 507 13.5 使用Web Service进行网络 编程 508 13.5.1 Web Service简介 509 13.5.2 Web Service平台概述 510 13.5.3 使用Android应用调用 Web ...

    疯狂Android讲义.part1

    13.4.1 使用WebView浏览网页 506 13.4.2 使用WebView加载HTML 代码 507 13.5 使用Web Service进行网络 编程 508 13.5.1 Web Service简介 509 13.5.2 Web Service平台概述 510 13.5.3 使用Android应用调用 Web ...

    vue-webapi-client-application-demo:使用asp.net核心webapi + vue + webwindow构建的独立运行客户端示例

    webwindows是一个能够快速使用的webview库 asp.net核心webapi是流行的嵌入框架 signalr是一个常用的websocket工具 这个示范做了什么 新建了一个.net core webapi项目 添加了wwwroot文件,并完成始终拷贝到输出,并...

    基于Krpano的全景导游系统设计与实现(含word文档)

    1.绪论 1 1.1研究的背景及意义 1 ...4.4.3 webview加载Krpano内核以及调用百度地图和高德地图导航 27 4.4.4 微信分享 28 5. 系统测试 29 5.1 PC的文案内容管理功能测试 29 6.总结与展望 32 参考文献 33

    Android开发与应用——张荣,原书配套课件

    8.1.2 WebView组件 8.1.3 HttpURLConnection 8.2 Socket编程 8.3 数据的解析 8.3.1 JSON数据解析 8.3.2 XML数据解析 8.4 Web Service访问 8.5 小结 练习 第9章 多媒体应用 9.1 音频与视频的播放 ...

    cordova-sqlite-porter:CordovaPhonegap 插件使用 SQL 或 JSON 导入导出 SQLite 数据库

    该库(以及 Cordova/Phonegap 插件)可用于使用 SQL 或 JSON 从 SQLite 数据库导入/导出。 适用于任何支持 Common-JS 模块(即 NodeJS、Webpack)并通过 SQLite 数据库提供 WebSQL API 的 JavaScript 环境 适用于在...

    lispkit:使用cffisbcl与webkitgtk交互的个人项目

    概述 基于A WebKitGTK(GTK3,WebKit1)微浏览器 通过Steel Bank Common Lisp的C外部功能接口与Common Lisp中的Webkit进行接口 通过使用 / / Web视图的用户界面以及导出到Javascript上下文中的函数 WebKit2具有线程...

Global site tag (gtag.js) - Google Analytics