在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就可以 为所欲为了。
看一个实例:
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的目的。
?import android.app.Activity;
import android.app.AlertDialog;
import android.app.AlertDialog.Builder;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.JsPromptResult;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebStorage;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class WebviewTestActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final WebView wv = new WebView(this);
// 覆盖默认后退按钮的作用,替换成WebView里的查看历史页面
wv.setOnKeyListener(new View.OnKeyListener() {
@Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
if (event.getAction() == KeyEvent.ACTION_DOWN) {
if ((keyCode == KeyEvent.KEYCODE_BACK) && wv.canGoBack()) {
wv.goBack();
return true;
}
}
return false;
}
});
// 设置支持Javascript
wv.getSettings().setJavaScriptEnabled(true);
wv.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
wv.getSettings().setDatabaseEnabled(true);
wv.getSettings().setDatabasePath("/data/data/com.xinze.joke/databases");
// 创建WebViewClient对象
WebViewClient wvc = new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
wv.loadUrl(url);
// 记得消耗掉这个事件。给不知道的朋友再解释一下,Android中返回True的意思就是到此为止吧,事件就会不会冒泡传递了,我们称之为消耗掉
return true;
}
};
// 设置WebViewClient对象
wv.setWebViewClient(wvc);
// 创建WebViewChromeClient
WebChromeClient wvcc = new WebChromeClient() {
// 处理Alert事件
@Override
public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
// 构建一个Builder来显示网页中的alert对话框
Builder builder = new Builder(WebviewTestActivity.this);
builder.setTitle("笑死不偿命");
builder.setMessage(message);
builder.setPositiveButton(android.R.string.ok, new AlertDialog.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
});
builder.setCancelable(false);
builder.create();
builder.show();
return true;
}
// 处理Confirm事件
@Override
public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {
Builder builder = new Builder(WebviewTestActivity.this);
builder.setTitle("删除确认");
builder.setMessage(message);
builder.setPositiveButton(android.R.string.ok, new AlertDialog.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
});
builder.setNeutralButton(android.R.string.cancel, new AlertDialog.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.cancel();
}
});
builder.setCancelable(false);
builder.create();
builder.show();
return true;
}
// 处理提示事件
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue,
JsPromptResult result) {
// 看看默认的效果
return super.onJsPrompt(view, url, message, defaultValue, result);
}
@Override
public void onExceededDatabaseQuota(String url, String
databaseIdentifier, long currentQuota, long estimatedSize, long
totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {
quotaUpdater.updateQuota(204801);
}
};
// wv.loadUrl("http://mrdoob.com/projects/chromeexperiments/ball_pool/");
// wv.loadUrl("http://www.theshodo.com/Write");
wv.loadUrl("http://192.168.1.107:8888/MBPHtmlClient/");
// 设置setWebChromeClient对象
wv.setWebChromeClient(wvcc);
setContentView(wv);
}
}
相关推荐
Android8.0以下手机自带的android-system-webview版本过低使用
Android-X5WebView基本封装和使用 通过OkHttp拦截器、自定义CookieJar有效完成客户端与H5端的Cookie同步管理 监听WebView的加载进度 滚动条的设置(隐藏或者显示,内侧显示还是外侧显示) 优化X5WebView的预加载问题...
而WebView则是Android系统中的一个组件,它允许开发者在应用程序中嵌入网页内容,实现类似浏览器的功能。 **PHP** 是“超文本预处理器”的缩写,是一种解释型的、面向对象的、通用的脚本语言。在Web开发中,PHP常...
这个项目对于理解WebSocket与Android WebView的结合使用具有重要的学习价值。 首先,WebSocket API在Android中的实现通常依赖于第三方库,如`android-async-http-websocket`或`java-websocket`等。这些库提供了创建...
在这个特定的案例中,"xamarin-android-webview-upload.7z" 压缩包文件包含了一个关于如何在 Xamarin Android 应用中使用 Web 视图(WebView)进行图片上传的示例项目。以下将详细解释这个知识点。 1. **Xamarin ...
iOS默认情况下支持此行为,因此将仅使用本机iOS WebView。 入门 yarn add hummingbird-me/react-native-android-fullscreen-webview 自动链接库 react-native link 更新AndroidManifest.xml 在您的主要活动下,...
在实际开发中,你可以通过引入`crosswalk-webview-14.43.343.23-arm`这样的库文件,将Crosswalk-WebView集成到Android项目中。这个特定版本是针对ARM架构的设备,包含了特定版本的Crosswalk-WebView,确保在相应设备...
在开发中,有时候我们会在app中使用WebView加载一个web页面。这样可以适当减轻我们开发的难度。但是弊端是WebView中切换html,没有像原生页面的切换效果。这里我们就利用动画,以及 获取网页的快照来实现android ...
react-native-android-webview解决React Native自带的WebView组件Android不能拦截URL的问题安装npm install react-native-android-webview --save 本机库链接安卓android/settings.gradle添加到android/settings....
•Android---UI篇---WebView(网络视图) • •Andorid---UI篇---两种进度条(ProgressBar) • •Android---UI篇---Dialog(对话框) • •Android---UI篇---AutoCompleteTextView(自动提示) • •Android---UI篇...
首先,Unity-webview-integration-master项目是一个针对Unity的WebView插件,它允许Unity应用在Android平台上加载和显示Web内容。这个项目的核心是将一个Android原生的WebView组件与Unity的游戏逻辑相结合,使得用户...
6. **源码分析**:在提供的压缩包文件名"react-native-webview-for-android-master"中,我们可以推测这可能是项目的源代码仓库。通过查看源码,我们可以学习如何实现这个自定义WebView组件,包括如何监听事件、如何...
- 文件“crosswalk-webview-23.53.589.4-x86_64”是针对x86_64架构的版本,适用于64位设备。开发者在不同设备上测试时,需要根据设备的架构选择合适的版本。 - 尝试集成Crosswalk-WebView时,确保按照官方文档进行...
Android WebView 加载 PDF 文件实现。其原理就是在 app 本地搭建一个 website ,然后利用 WebView 加载这个站点,站点去实现加载显示 PDF 的目的,站点其原理也是采用 js 框架去实现的。
然而,由于React Native的WebView组件与原生Android系统的交互限制,有时会出现无法从Android设备的相册或相机选择图片并上传的问题。这个问题可能会导致用户体验下降,因为用户无法充分利用手机的功能。本文将深入...
React Native是Facebook推出的一种跨平台移动应用开发框架,它基于JavaScript,允许开发者使用React组件化思想构建原生iOS和Android应用。通过React Native,开发者可以使用一套代码库同时开发两个平台的应用,提高...
在Android应用开发中,WebView是一个非常重要的组件,它允许开发者在应用程序内嵌入网页内容,实现与网页的交互。这个“Android-android端通用WebView”项目可能是为了提供一个可复用的、功能丰富的WebView组件,...
标题中的"com.android.webview-95.0.4638.50"指的是Android系统中的一个关键组件,即WebView。WebView是一个内置的浏览器引擎,允许Android应用程序(App)在不离开应用的情况下显示网页内容。它相当于一个轻量级的...
在Android开发中,Webview是一个非常重要的组件,它允许我们在应用程序内部嵌入网页内容,提供类似于浏览器的功能。本文将深入探讨如何在Android的Webview中实现缓存功能,包括指定缓存目录、设置缓存时间等关键知识...