当前位置: 编程技术>移动开发
android WebView加载html5介绍
来源: 互联网 发布时间:2014-10-13
本文导语: Android设备多分辨率的问题 Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示 Android浏览器和WebView默认为mdpi。hdpi相当于mdpi的1.5倍 ldpi相当于0.75倍 三种解决方式:1 viewport属性 2 CSS控制 3 JS控制 1 viewport属性...
Android设备多分辨率的问题
Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示
Android浏览器和WebView默认为mdpi。hdpi相当于mdpi的1.5倍 ldpi相当于0.75倍
三种解决方式:1 viewport属性 2 CSS控制 3 JS控制
1 viewport属性放在HTML的中
Html代码
Exmaple
meta中viewport的属性如下
Html代码
2 CSS控制设备密度
为每种密度创建独立的样式表(注意其中的webkit-device-pixel-ratio 3个数值对应3种分辨率)
Html代码
在一个样式表中,指定不同的样式
Html代码
#header {
background:url(/tech-mobile-dev/medium-density-image.png);
}
@media screen and (-webkit-device-pixel-ratio: 1.5) {
// CSS for high-density screens
#header {
background:url(/tech-mobile-dev/high-density-image.png);
}
}
@media screen and (-webkit-device-pixel-ratio: 0.75) {
// CSS for low-density screens
#header {
background:url(/tech-mobile-dev/low-density-image.png);
}
}
Html代码
[code]
3 JS控制
Android浏览器和WebView支持查询当前设别密度的DOM特性
window.devicePixelRatio 同样值有3个(0.75,1,1.5对应3种分辨率)
JS中查询设备密度的方法
Js代码
[code]
if (window.devicePixelRatio == 1.5) {
alert("This is a high-density screen");
} elseif (window.devicePixelRation == 0.75) {
alert("This is a low-density screen");
}
Android中构建HTML5应用
使用WebView控件 与其他控件的使用方法相同 在layout中使用一个标签
WebView不包括导航栏,地址栏等完整浏览器功能,只用于显示一个网页
在WebView中加载Web页面,使用loadUrl()
Java代码
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("http://www.example.com");
注意在manifest文件中加入访问互联网的权限:
Xml代码
在Android中点击一个链接,默认是调用应用程序来启动,因此WebView需要代为处理这个动作 通过WebViewClient
Java代码
//设置WebViewClient
webView.setWebViewClient(new WebViewClient(){
publicboolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(/tech-mobile-dev/url/index.html);
returntrue;
}
publicvoid onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
}
publicvoid onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}
});
这个WebViewClient对象是可以自己扩展的,例如
Java代码
privateclass MyWebViewClient extends WebViewClient {
publicboolean shouldOverrideUrlLoading(WebView view, String url) {
if (Uri.parse(url).getHost().equals("www.example.com")) {
returnfalse;
}
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
startActivity(intent);
returntrue;
}
}
之后:
Java代码
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new MyWebViewClient());
另外出于用户习惯上的考虑 需要将WebView表现得更像一个浏览器,也就是需要可以回退历史记录
因此需要覆盖系统的回退键 goBack,goForward可向前向后浏览历史页面
Java代码
publicboolean onKeyDown(int keyCode, KeyEvent event) {
if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack() {
myWebView.goBack();
returntrue;
}
returnsuper.onKeyDown(keyCode, event);
}
Java代码
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
(这里的webSetting用处非常大 可以开启很多设置 在之后的本地存储,地理位置等之中都会使用到)
1 在JS中调用Android的函数方法
首先 需要在Android程序中建立接口
Java代码
finalclass InJavaScript {
publicvoid runOnAndroidJavaScript(final String str) {
handler.post(new Runnable() {
publicvoid run() {
TextView show = (TextView) findViewById(R.id.textview);
show.setText(str);
}
});
}
}
Java代码
//把本类的一个实例添加到js的全局对象window中,
//这样就可以使用windows.injs来调用它的方法
webView.addJavascriptInterface(new InJavaScript(), "injs");
在JavaScript中调用Js代码
function sendToAndroid(){
var str = "Cookie call the Android method from js";
windows.injs.runOnAndroidJavaScript(str);//调用android的函数
}
2 在Android中调用JS的方法
在JS中的方法:
Js代码
function getFromAndroid(str){
document.getElementByIdx_x_x_x("android").innerHTML=str;
}
在Android调用该方法Java代码
Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(new OnClickListener() {
publicvoid onClick(View arg0) {
//调用javascript中的方法
webView.loadUrl("javascript:getFromAndroid('Cookie call the js function from Android')");
}
});
3 Android中处理JS的警告,对话框等 在Android中处理JS的警告,对话框等需要对WebView设置WebChromeClient对象
Java代码
//设置WebChromeClient
webView.setWebChromeClient(new WebChromeClient(){
//处理javascript中的alert
publicboolean onJsAlert(WebView view, String url, String message, final JsResult result) {
//构建一个Builder来显示网页中的对话框
Builder builder = new Builder(MainActivity.this);
builder.setTitle("Alert");
builder.setMessage(message);
builder.setPositiveButton(android.R.string.ok,
new AlertDialog.OnClickListener() {
publicvoid onClick(DialogInterface dialog, int which) {
result.confirm();
}
});
builder.setCancelable(false);
builder.create();
builder.show();
returntrue;
};
//处理javascript中的confirm
publicboolean onJsConfirm(WebView view, String url, String message, final JsResult result) {
Builder builder = new Builder(MainActivity.this);
builder.setTitle("confirm");
builder.setMessage(message);
builder.setPositiveButton(android.R.string.ok,
new AlertDialog.OnClickListener() {
publicvoid onClick(DialogInterface dialog, int which) {
result.confirm();
}
});
builder.setNegativeButton(android.R.string.cancel,
new DialogInterface.OnClickListener() {
publicvoid onClick(DialogInterface dialog, int which) {
result.cancel();
}
});
builder.setCancelable(false);
builder.create();
builder.show();
returntrue;
};
@Override
//设置网页加载的进度条
publicvoid onProgressChanged(WebView view, int newProgress) {
MainActivity.this.getWindow().setFeatureInt(Window.FEATURE_PROGRESS, newProgress * 100);
super.onProgressChanged(view, newProgress);
}
//设置应用程序的标题title
publicvoid onReceivedTitle(WebView view, String title) {
MainActivity.this.setTitle(title);
super.onReceivedTitle(view, title);
}
});
Android中的调试
通过JS代码输出log信息
Js代码
Js代码: console.log("Hello World");
Log信息: Console: Hello World http://www.example.com/hello.html :82
在WebChromeClient中实现onConsoleMesaage()回调方法,让其在LogCat中打印信息
Java代码
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebChromeClient(new WebChromeClient() {
publicvoid onConsoleMessage(String message, int lineNumber, String sourceID) {
Log.d("MyApplication", message + " -- From line "
+ lineNumber + " of "
+ sourceID);
}
});
以及Java代码
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebChromeClient(new WebChromeClient() {
publicboolean onConsoleMessage(ConsoleMessage cm) {
Log.d("MyApplication", cm.message() + " -- From line "
+ cm.lineNumber() + " of "
+ cm.sourceId() );
returntrue;
}
});
*ConsoleMessage 还包括一个 MessageLevel 表示控制台传递信息类型。 您可以用messageLevel()查询信息级别,以确定信息的严重程度,然后使用适当的Log方法或采取其他适当的措施。
HTML5本地存储在Android中的应用
HTML5提供了2种客户端存储数据新方法: localStorage 没有时间限制 sessionStorage 针对一个Session的数据存储
Js代码
localStorage.lastname="Smith";
document.write(localStorage.lastname);
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
WebStorage的API:
Js代码
//清空storage
localStorage.clear();
//设置一个键值
localStorage.setItem(“yarin”,“yangfegnsheng”);
//获取一个键值
localStorage.getItem(“yarin”);
//获取指定下标的键的名称(如同Array)
localStorage.key(0);
//return “fresh” //删除一个键值
localStorage.removeItem(“yarin”);
注意一定要在设置中开启哦
setDomStorageEnabled(true)
在Android中进行操作 Java代码
//启用数据库
webSettings.setDatabaseEnabled(true);
String dir = this.getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath();
//设置数据库路径
webSettings.setDatabasePath(dir);
//使用localStorage则必须打开
webSettings.setDomStorageEnabled(true);
//扩充数据库的容量(在WebChromeClinet中实现)
publicvoid onExceededDatabaseQuota(String url, String databaseIdentifier, long currentQuota,
long estimatedSize, long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {
quotaUpdater.updateQuota(estimatedSize * 2);
}
在JS中按常规进行数据库操作 Js代码
function initDatabase() {
try {
if (!window.openDatabase) {
alert('Databases are not supported by your browser');
} else {
var shortName = 'YARINDB';
var version = '1.0';
var displayName = 'yarin db';
var maxSize = 100000; // in bytes
YARINDB = openDatabase(shortName, version, displayName, maxSize);
createTables();
selectAll();
}
} catch(e) {
if (e == 2) {
// Version mismatch.
console.log("Invalid database version.");
} else {
console.log("Unknown error "+ e +".");
}
return;
}
}
function createTables(){
YARINDB.transaction(
function (transaction) {
transaction.executeSql('CREATE TABLE IF NOT EXISTS yarin(id INTEGER NOT NULL PRIMARY KEY, name TEXT NOT NULL,desc TEXT NOT NULL);', [], nullDataHandler, errorHandler);
}
);
insertData();
}
function insertData(){
YARINDB.transaction(
function (transaction) {
//Starter data when page is initialized
var data = ['1','yarin yang','I am yarin'];
transaction.executeSql("INSERT INTO yarin(id, name, desc) VALUES (?, ?, ?)", [data[0], data[1], data[2]]);
}
);
}
function errorHandler(transaction, error){
if (error.code==1){
// DB Table already exists
} else {
// Error is a human-readable string.
console.log('Oops. Error was '+error.message+' (Code '+error.code+')');
}
returnfalse;
}
function nullDataHandler(){
console.log("SQL Query Succeeded");
}
function selectAll(){
YARINDB.transaction(
function (transaction) {
transaction.executeSql("SELECT * FROM yarin;", [], dataSelectHandler, errorHandler);
}
);
}
function dataSelectHandler(transaction, results){
// Handle the results
for (var i=0; i
Android 图片加载和缓存库 Glide
Android加载对话框同时异步执行实现方法
Android 中动态加载.jar的实现步骤
Android中自定义加载样式图片的具体实现
android动态加载布局文件示例
android判断phonegap是否联网且加载super.loadUrl网址
基于android示例程序(bitmapfun) 高效加载图片让人无语地方
Android 游戏引擎libgdx 资源加载进度百分比显示案例分析
Android 自定义标题栏 显示网页加载进度的方法实例
Android加载大分辨率图片到手机内存中的实例方法
基于Android ListView之加载使用技巧
Android实现加载广告图片和倒计时的开屏布局
Android 异步加载图片的实例代码
android异步加载图片并缓存到本地实现方法
Android 异步加载图片分析总结
Android实现加载广告图片和倒计时的开屏布局
iis7站长之家
android教程使用webview访问https的url处理sslerror示例
关于Android WebView的loadData方法的注意事项分析
android控件之WebView控件缩小
Android webview与js交换JSON对象数据示例
Android的webview支持HTML5的离线应用功能详细配置
解析Android中webview和js之间的交互
Unity3D游戏引擎实现在Android中打开WebView的实例
android webview 简单浏览器实现代码
android中WebView和javascript实现数据交互实例
android WebView组件使用总结
基于Android中Webview使用自定义的javascript进行回调的问题详解
android中webview控件和javascript交互实例
Android开发之WebView组件的使用解析
Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示
Android浏览器和WebView默认为mdpi。hdpi相当于mdpi的1.5倍 ldpi相当于0.75倍
三种解决方式:1 viewport属性 2 CSS控制 3 JS控制
1 viewport属性放在HTML的中
Html代码
代码如下:
Exmaple
meta中viewport的属性如下
Html代码
代码如下:
2 CSS控制设备密度
为每种密度创建独立的样式表(注意其中的webkit-device-pixel-ratio 3个数值对应3种分辨率)
Html代码
代码如下:
在一个样式表中,指定不同的样式
Html代码
代码如下:
#header {
background:url(/tech-mobile-dev/medium-density-image.png);
}
@media screen and (-webkit-device-pixel-ratio: 1.5) {
// CSS for high-density screens
#header {
background:url(/tech-mobile-dev/high-density-image.png);
}
}
@media screen and (-webkit-device-pixel-ratio: 0.75) {
// CSS for low-density screens
#header {
background:url(/tech-mobile-dev/low-density-image.png);
}
}
Html代码
代码如下:
[code]
3 JS控制
Android浏览器和WebView支持查询当前设别密度的DOM特性
window.devicePixelRatio 同样值有3个(0.75,1,1.5对应3种分辨率)
JS中查询设备密度的方法
Js代码
[code]
if (window.devicePixelRatio == 1.5) {
alert("This is a high-density screen");
} elseif (window.devicePixelRation == 0.75) {
alert("This is a low-density screen");
}
Android中构建HTML5应用
使用WebView控件 与其他控件的使用方法相同 在layout中使用一个标签
WebView不包括导航栏,地址栏等完整浏览器功能,只用于显示一个网页
在WebView中加载Web页面,使用loadUrl()
Java代码
代码如下:
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("http://www.example.com");
注意在manifest文件中加入访问互联网的权限:
Xml代码
代码如下:
在Android中点击一个链接,默认是调用应用程序来启动,因此WebView需要代为处理这个动作 通过WebViewClient
Java代码
代码如下:
//设置WebViewClient
webView.setWebViewClient(new WebViewClient(){
publicboolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(/tech-mobile-dev/url/index.html);
returntrue;
}
publicvoid onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
}
publicvoid onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}
});
这个WebViewClient对象是可以自己扩展的,例如
Java代码
代码如下:
privateclass MyWebViewClient extends WebViewClient {
publicboolean shouldOverrideUrlLoading(WebView view, String url) {
if (Uri.parse(url).getHost().equals("www.example.com")) {
returnfalse;
}
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
startActivity(intent);
returntrue;
}
}
之后:
Java代码
代码如下:
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new MyWebViewClient());
另外出于用户习惯上的考虑 需要将WebView表现得更像一个浏览器,也就是需要可以回退历史记录
因此需要覆盖系统的回退键 goBack,goForward可向前向后浏览历史页面
Java代码
代码如下:
publicboolean onKeyDown(int keyCode, KeyEvent event) {
if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack() {
myWebView.goBack();
returntrue;
}
returnsuper.onKeyDown(keyCode, event);
}
Java代码
代码如下:
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
(这里的webSetting用处非常大 可以开启很多设置 在之后的本地存储,地理位置等之中都会使用到)
1 在JS中调用Android的函数方法
首先 需要在Android程序中建立接口
Java代码
代码如下:
finalclass InJavaScript {
publicvoid runOnAndroidJavaScript(final String str) {
handler.post(new Runnable() {
publicvoid run() {
TextView show = (TextView) findViewById(R.id.textview);
show.setText(str);
}
});
}
}
Java代码
代码如下:
//把本类的一个实例添加到js的全局对象window中,
//这样就可以使用windows.injs来调用它的方法
webView.addJavascriptInterface(new InJavaScript(), "injs");
在JavaScript中调用Js代码
function sendToAndroid(){
var str = "Cookie call the Android method from js";
windows.injs.runOnAndroidJavaScript(str);//调用android的函数
}
2 在Android中调用JS的方法
在JS中的方法:
Js代码
代码如下:
function getFromAndroid(str){
document.getElementByIdx_x_x_x("android").innerHTML=str;
}
在Android调用该方法Java代码
代码如下:
Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(new OnClickListener() {
publicvoid onClick(View arg0) {
//调用javascript中的方法
webView.loadUrl("javascript:getFromAndroid('Cookie call the js function from Android')");
}
});
3 Android中处理JS的警告,对话框等 在Android中处理JS的警告,对话框等需要对WebView设置WebChromeClient对象
Java代码
代码如下:
//设置WebChromeClient
webView.setWebChromeClient(new WebChromeClient(){
//处理javascript中的alert
publicboolean onJsAlert(WebView view, String url, String message, final JsResult result) {
//构建一个Builder来显示网页中的对话框
Builder builder = new Builder(MainActivity.this);
builder.setTitle("Alert");
builder.setMessage(message);
builder.setPositiveButton(android.R.string.ok,
new AlertDialog.OnClickListener() {
publicvoid onClick(DialogInterface dialog, int which) {
result.confirm();
}
});
builder.setCancelable(false);
builder.create();
builder.show();
returntrue;
};
//处理javascript中的confirm
publicboolean onJsConfirm(WebView view, String url, String message, final JsResult result) {
Builder builder = new Builder(MainActivity.this);
builder.setTitle("confirm");
builder.setMessage(message);
builder.setPositiveButton(android.R.string.ok,
new AlertDialog.OnClickListener() {
publicvoid onClick(DialogInterface dialog, int which) {
result.confirm();
}
});
builder.setNegativeButton(android.R.string.cancel,
new DialogInterface.OnClickListener() {
publicvoid onClick(DialogInterface dialog, int which) {
result.cancel();
}
});
builder.setCancelable(false);
builder.create();
builder.show();
returntrue;
};
@Override
//设置网页加载的进度条
publicvoid onProgressChanged(WebView view, int newProgress) {
MainActivity.this.getWindow().setFeatureInt(Window.FEATURE_PROGRESS, newProgress * 100);
super.onProgressChanged(view, newProgress);
}
//设置应用程序的标题title
publicvoid onReceivedTitle(WebView view, String title) {
MainActivity.this.setTitle(title);
super.onReceivedTitle(view, title);
}
});
Android中的调试
通过JS代码输出log信息
Js代码
Js代码: console.log("Hello World");
Log信息: Console: Hello World http://www.example.com/hello.html :82
在WebChromeClient中实现onConsoleMesaage()回调方法,让其在LogCat中打印信息
Java代码
代码如下:
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebChromeClient(new WebChromeClient() {
publicvoid onConsoleMessage(String message, int lineNumber, String sourceID) {
Log.d("MyApplication", message + " -- From line "
+ lineNumber + " of "
+ sourceID);
}
});
以及Java代码
代码如下:
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebChromeClient(new WebChromeClient() {
publicboolean onConsoleMessage(ConsoleMessage cm) {
Log.d("MyApplication", cm.message() + " -- From line "
+ cm.lineNumber() + " of "
+ cm.sourceId() );
returntrue;
}
});
*ConsoleMessage 还包括一个 MessageLevel 表示控制台传递信息类型。 您可以用messageLevel()查询信息级别,以确定信息的严重程度,然后使用适当的Log方法或采取其他适当的措施。
HTML5本地存储在Android中的应用
HTML5提供了2种客户端存储数据新方法: localStorage 没有时间限制 sessionStorage 针对一个Session的数据存储
Js代码
代码如下:
localStorage.lastname="Smith";
document.write(localStorage.lastname);
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
WebStorage的API:
Js代码
代码如下:
//清空storage
localStorage.clear();
//设置一个键值
localStorage.setItem(“yarin”,“yangfegnsheng”);
//获取一个键值
localStorage.getItem(“yarin”);
//获取指定下标的键的名称(如同Array)
localStorage.key(0);
//return “fresh” //删除一个键值
localStorage.removeItem(“yarin”);
注意一定要在设置中开启哦
setDomStorageEnabled(true)
在Android中进行操作 Java代码
//启用数据库
webSettings.setDatabaseEnabled(true);
String dir = this.getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath();
//设置数据库路径
webSettings.setDatabasePath(dir);
//使用localStorage则必须打开
webSettings.setDomStorageEnabled(true);
//扩充数据库的容量(在WebChromeClinet中实现)
publicvoid onExceededDatabaseQuota(String url, String databaseIdentifier, long currentQuota,
long estimatedSize, long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {
quotaUpdater.updateQuota(estimatedSize * 2);
}
在JS中按常规进行数据库操作 Js代码
function initDatabase() {
try {
if (!window.openDatabase) {
alert('Databases are not supported by your browser');
} else {
var shortName = 'YARINDB';
var version = '1.0';
var displayName = 'yarin db';
var maxSize = 100000; // in bytes
YARINDB = openDatabase(shortName, version, displayName, maxSize);
createTables();
selectAll();
}
} catch(e) {
if (e == 2) {
// Version mismatch.
console.log("Invalid database version.");
} else {
console.log("Unknown error "+ e +".");
}
return;
}
}
function createTables(){
YARINDB.transaction(
function (transaction) {
transaction.executeSql('CREATE TABLE IF NOT EXISTS yarin(id INTEGER NOT NULL PRIMARY KEY, name TEXT NOT NULL,desc TEXT NOT NULL);', [], nullDataHandler, errorHandler);
}
);
insertData();
}
function insertData(){
YARINDB.transaction(
function (transaction) {
//Starter data when page is initialized
var data = ['1','yarin yang','I am yarin'];
transaction.executeSql("INSERT INTO yarin(id, name, desc) VALUES (?, ?, ?)", [data[0], data[1], data[2]]);
}
);
}
function errorHandler(transaction, error){
if (error.code==1){
// DB Table already exists
} else {
// Error is a human-readable string.
console.log('Oops. Error was '+error.message+' (Code '+error.code+')');
}
returnfalse;
}
function nullDataHandler(){
console.log("SQL Query Succeeded");
}
function selectAll(){
YARINDB.transaction(
function (transaction) {
transaction.executeSql("SELECT * FROM yarin;", [], dataSelectHandler, errorHandler);
}
);
}
function dataSelectHandler(transaction, results){
// Handle the results
for (var i=0; i