Webview

本文介绍Android中使用WebView组件浏览网页的方法,并详细说明了配置过程中的关键步骤,包括权限设置、JavaScript支持、链接处理及按键事件处理。此外还展示了如何通过WebView实现与JavaScript交互,包括自定义对象和方法。

在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对象。

  1. mWebView.setWebViewClient( new  WebViewClient(){       
  2.                     public   boolean  shouldOverrideUrlLoading(WebView view, String url) {       
  3.                         view.loadUrl(url);       
  4.                         return   true ;       
  5.                     }       
  6.         });   

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

  1. public   boolean  onKeyDown( int  keyCode, KeyEvent event) {       
  2.         if  ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {       
  3.             mWebView.goBack();       
  4.                    return   true ;       
  5.         }       
  6.         return   super .onKeyDown(keyCode, event);       
  7.     }     

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

  看一个实例:

  1. public   class  WebViewDemo  extends  Activity {        
  2.     private  WebView mWebView;       
  3.     private  Handler mHandler =  new  Handler();       
  4.        
  5.     public   void  onCreate(Bundle icicle) {       
  6.         super .onCreate(icicle);       
  7.         setContentView(R.layout.webviewdemo);       
  8.         mWebView = (WebView) findViewById(R.id.webview);       
  9.         WebSettings webSettings = mWebView.getSettings();       
  10.         webSettings.setJavaScriptEnabled(true );       
  11.         mWebView.addJavascriptInterface(new  Object() {       
  12.             public   void  clickOnAndroid() {       
  13.                 mHandler.post(new  Runnable() {       
  14.                     public   void  run() {       
  15.                         mWebView.loadUrl("javascript:wave()" );       
  16.                     }       
  17.                 });       
  18.             }       
  19.         }, "demo" );       
  20.         mWebView.loadUrl("file:///android_asset/demo.html" );       
  21.     }       
  22. }   

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

  1. < html >        
  2.         < mce:script   language = "javascript" > <!--     
  3.        
  4.                 function wave() {       
  5.                     document.getElementById("droid").src = "android_waving.png" ;       
  6.                 }       
  7.              
  8. // --> </ mce:script >        
  9.         < body >        
  10.             < a   onClick = "window.demo.clickOnAndroid()" >        
  11.                                 < img   id = "droid"   src = "android_normal.png"   mce_src = "android_normal.png" /> < br >        
  12.                                 Click me!       
  13.             </ a >        
  14.         </ body >        
  15. </ 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的目的。

 

--------------------------------------------------------------------------------------------转载

05-07
### Webview 技术介绍 Webview 是一种嵌入式浏览器组件,允许开发者在其应用中加载并渲染网页内容。它广泛应用于移动开发领域(如 Android 和 iOS),同时也支持桌面端的应用场景(如 Windows)。以下是关于 Webview 的详细介绍: #### 1. **Webview 的基本概念** Webview 提供了一种简单的方式来集成 HTML、CSS 和 JavaScript 到原生应用程序中。通过这种方式,开发者可以在同一界面中实现本地功能和网络资源的无缝交互[^2]。 #### 2. **主要特点** - **跨平台能力** Webview 基于 WebKit 引擎或其他现代浏览器引擎构建,能够运行在多个操作系统上,从而减少重复编码的工作量[^2]。 - **动态更新** 应用程序可以通过 Webview 实现即时的内容刷新,这对于新闻客户端或社交媒体类应用尤为重要[^2]。 - **安全性保障** 大多数 Webview 都内置了沙箱机制,有效隔离外部网站与宿主环境之间的数据交换,降低潜在风险[^2]。 #### 3. **不同平台下的 Webview** ##### (1) **Windows 平台上的 Flutter WebView** 对于希望利用 Dart 编程语言创建跨平台 GUI 应用的开发者来说,“flutter-webview-windows”是一个不错的选择。该项目基于 Microsoft Edge 的 WebView2 控件开发而成,提供了高性能以及良好的兼容性[^1]。 示例代码如下: ```dart import 'package:flutter_webview_windows/flutter_webview_windows.dart'; void main() { final webView = FlutterWebviewWindows(); webView.createWindow( title: "Example", width: 800, height: 600, url: Uri.parse('https://www.example.com'), ); } ``` ##### (2) **Android 上的 WebView** 在 Android 中,`android.webkit.WebView` 类被用来处理页面加载逻辑。除了常规操作外,还可以自定义设置来增强用户体验,比如启用 JavaScript 支持或者调整缩放比例[^4]。 配置样例: ```java WebView myWebView = findViewById(R.id.webview); myWebView.getSettings().setJavaScriptEnabled(true); // 启动 JS 功能 myWebView.setWebViewClient(new WebViewClient()); // 确保链接点击不会跳转到默认浏览器 myWebView.loadUrl("http://developer.android.com"); ``` ##### (3) **Unity 游戏引擎中的 WebView 插件** 如果目标是将互联网服务引入 Unity 构建的游戏里,则可以选择 “gree/unity-webview”。此插件经过优化后更加稳定可靠,并且易于集成至现有项目之中[^3]。 安装方法提示: ```bash git clone https://gitcode.com/gh_mirrors/uni/Unity-Webview.git cd Unity-Webview open YourProjectInUnity/ ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值