html5回退,html 后退

android中怎么使用html5离线功能

HTML5的离线应用功能可以使得WebApp即使在网络断开的情况下仍能正常使用这是个非常有用的功能,但如何使Webivew支持HTML5离线应用功能呢,需要的朋友可以参考下

HTML5的离线应用功能可以使得WebApp即使在网络断开的情况下仍能正常使用，这是个非常有用的功能。近来工作中也要用到HTML5离线应用功能，由于是在Android平台上做，所以自然而然的选择Webview来解析网页。但如何使Webivew支持HTML5离线应用功能呢，经过反复摸索和上网查找资料，反复做试验终于成功了。

首先需配置webview的的一些属性，假设activity中已经有了一个Webview的实例对象，名为m_webview，然后增加以下代码：

复制代码 代码如下:

WebSettings webseting = m_webview.getSettings();

webseting.setDomStorageEnabled(true);

webseting.setAppCacheMaxSize(1024*1024*8);//设置缓冲大小，我设的是8M

String appCacheDir = this.getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath();

webseting.setAppCachePath(appCacheDir);

webseting.setAllowFileAccess(true);

webseting.setAppCacheEnabled(true);

webseting.setCacheMode(WebSettings.LOAD_DEFAULT);

webview可以设置一个WebChromeClient对象，在其onReachedMaxAppCacheSize函数对扩充缓冲做出响应。代码如下

复制代码 代码如下:

m_webview.setWebChromeClient(m_chromeClient);

private WebChromeClient m_chromeClient = new WebChromeClient(){

//扩充缓存的容量

@Override

public void onReachedMaxAppCacheSize(long spaceNeeded,

long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {

quotaUpdater.updateQuota(spaceNeeded * 2);

}

};

其次要修改http服务器中的配置，使其支持text/cache-manifest，我使用的是apache服务器，是windows版本的，在apache的conf文件夹中找到mime.types文件，打开后在文件的最后加上

“text/cache-manifest mf manifest”，重启服务器即可。这一步很重要，我就是因为服务器端没有配置这个，所以失败了好多次，最后是在附录链接1的回复中找到的线索。

经过以上设置Webview就可以支持HTML5的离线应用了。

附录链接1中说缓冲目录应该是getApplicationContext().getCacheDir().getAbsolutePath();但我经过试验后发现设置那个目录不起作用，可能是Android版本不同吧，我的是Android4.0.3，而他的可能是以前的Android版本吧。

缓冲目录使用getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath()是从附录链接2中找到的线索。

相关问答

Q1: 什么是HTML5（三）：性能&集成，设备访问

性能集成

web workers

Web Worker 是HTML5标准的一部分，这一规范定义了一套 API，它允许一段JavaScript程序运行在主线程之外的另外一个线程中。

一般情况下，当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。 

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

History API

window 对象通过history对象提供对浏览器历史记录的访问能力。它暴露了一些非常有用的方法和属性，让你在历史记录中自由前进和后退，而在HTML5中，更可以操纵历史记录中的数据。

概览

可以通过back()，forward()和go()方法在用户的历史记录中前进与后退。

要在历史记录中前进和后退，只需要这样做：

window.history.back(); //后退window.history.forword(); //前进12

而利用go（）方法，通过指定一个相对于当前页面位置的数值，可以从当前会话的历史记录中加载页面（当前页面索引值为0，上一页为-1，下一页为1）

window.history.go(-1); //后退一页，相当于back（）window.history.go(1);  //向前移动一页（相当于调用forward()）12

你可以查看length属性值，了解历史记录栈中一共有多少页：

var numberOfEntries = window.history.length;1

添加和修改历史记录条目

HTML5引进了history.pushState()方法和history.replaceState()方法，它们允许你逐条地添加和修改历史记录条目。这些方法可以协同window.onpopstate事件一起工作。

例子： 

假设 hfoo.html 将执行如下JavaScript代码：

var stateObj = { foo: "bar" };

history.pushState(stateObj, "page 2", "bar.html");12

这将让浏览器的地址栏显示tml，但不会加载bar.html页面也不会检查bar.html是否存在。

假设现在用户导航到了com，然后点击了后退按钮，此时，地址栏将会显示har.html，并且页面会触发popstate事件，该事件中的状态对象（state object）包含stateObj的一个拷贝。该页面看起来像foo.html，尽管页面内容可能在popstate事件中被修改。

如果我们再次点击后退按钮，URL将变回hoo.html，文档将触发另一个popstate事件，这次的状态对象为null。回退同样不会改变文档内容。

pushState（）方法 

此方法有三个参数：

状态对象（state object）：一个js对象，与用pushState()方法创建的新历史记录条目关联。

标题（title）：FireFox浏览器目前会忽略该参数，虽然以后可能会用上。考虑到未来可能会对该方法进行修改，传一个空字符串会比较安全。或者，你也可以传入一个简短的标题，标明将要进入的状态。

地址（URL）：新的历史记录条目的地址。 

浏览器不会在调用pushState()方法后加载该地址，但之后，可能会试图加载，例如用户重启浏览器。 

新的URL不一定是绝对路径；如果是相对路径，它将以当前URL为基准； 

传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。 

该参数是可选的；不指定的话则为文档当前URL。

replaceState（）方法 

history.replaceState()操作类似于history.pushState()，不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。

popstate事件 

每当激活的历史记录发生变化时，都会触发popstate事件。如果被激活的历史记录条目是由pushState所创建，或是被replaceState方法影响到的，popstate事件的状态属性将包含历史记录的状态对象的一个拷贝。

contenteditable属性

在HTML5中,通过设置contenteditable属性，任何元素都是可编辑的.，可以瞬间把你的网站变成wiki！

!DOCTYPE htmlhtml

 body

   div contenteditable="true"

     This text can be edited by the user.    /div

 /body/html12345678

拖放

HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。

拖放会触发一系列拖放事件：dragstart、dragenter、dragover、dragleave等。

焦点管理

支持新的 HTML5 activeElement 属性和 hasFocus 方法。

activeElement

document.activeElement：返回当前页面中获得焦点的元素，只读。

很多情况下,该属性会返回一个input或者textarea元素,于此同时,如果用户在文本输入框中选中了一些文本,还可以使用该元素的selectionStart和selectionEnd属性获得准确的选中文本内容.

该属性的值还可能是一个select元素(下拉菜单)或者type属性为button,checkbox或radio的input元素.

通常,用户可以通过Tab键来在页面中可以获得焦点的那些元素中切换,然后按下空格键激活这个元素

如果没有某个元素获得焦点,则该属性的值为当前页面中的body元素. 

截至目前只有firefox3.6支持。

hasFocus（）

document.hasFocus() 方法返回一个 Boolean，表明当前文档或者当前文档内的节点是否获得了焦点。

设备访问

使用camera API

可以参考什么是HTML5（二）中相关部分。

触摸事件

略

使用地理位置定位

地理位置 API 允许用户向 Web 应用程序提供他们的位置。出于隐私考虑，报告地理位置前会先请求用户许可。

地理位置 API 通过 navigator.geolocation 提供。

获取当前定位

可以调用 getCurrentPosition() 函数获取用户当前定位位置。 

这会异步地请求获取用户位置，并查询定位硬件来获取最新信息。当定位被确定后，定义的回调函数就会被执行。

navigator.geolocation.getCurrentPosition(function(position) {

 do_something(position.coords.latitude, position.coords.longitude);});123

检测设备方向

越来越多支持web功能的设备拥有检测自身方向的能力了；也就是说，这些设备可以记录下其受地心引力作用下而在方向上产生变化的数据。

有两种js事件负责处理方向信息。

DeviceOrientationEvent：会在加速度传感器检测到设备在方向上发生变化时触发。

DeviceMotionEvent：会在加速度发生改变时触发。

Q2: HTML5中实用快捷键有哪些？

html5是门语言，应该是没什么快捷键的吧，你说的快捷键应该对标的是某个编辑html代码的IDE,常用的有vscode(完全免费),webstorm(非免费，需要购买或pojie)...

Q3: html5 页面回退时localstorage怎样存储

h5本地存储localStorage，sessionStorage。 localStorage是没有失效时间的，sessionStorage的声明周期是浏览器的生命周期。 当浏览器关闭时，sessionStorage的数据将清空，而localStorage数据只要不通过代码特意的删除或手动删除，是永久保存的...