当前位置:  编程技术>移动开发

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
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 申请Android Map 的API Key(v2)的最新申请方式(SHA1密钥)
  • Android瀑布流实例 android_waterfall
  • Android开发需要的几点注意事项总结
  • Android系统自带样式 (android:theme)
  • android 4.0 托管进程介绍及优先级和回收机制
  • Android网络共享软件 Android Wifi Tether
  • Android访问与手机通讯相关类的介绍
  • Android 图标库 Android GraphView
  • Android及andriod无线网络Wifi开发的几点注意事项
  • 轻量级Android开发工具 Android Tools
  • Android 2.3 下StrictMode介绍
  • Android 开发环境 Android Studio
  • IDEA的Android开发插件 idea-android
  • Android手机事件提醒 Android Notifier
  • XBMC的Android客户端 android-xbmcremote
  • Android小游戏 Android Shapes
  • Android电池监控 Android Battery Dog
  • android开发:“android:WindowTitle”没有对应项no resource
  • Android 上类似IOS 的开关控件。 Android ToggleButton
  • Android 将 android view 的位置设为右下角的解决方法
  • Android 2D游戏引擎 Android Angle




  • 特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3