微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

HTML5缓存显示更多内容的奇怪错误

我对 HTML5网络存储和应用程序缓存慢慢但肯定会疯狂.

这是我的例子:
http://daviddarx.com/stuffs/work/custom/54/

缓存清单有效并在http://manifest-validator.com/http://daviddarx.com/stuffs/work/custom/54/cache.manifest上测试

由于它不工作,我采取了一个非常简单的工作example,然后尝试逐步添加我的部分代码和数据,添加一些,然后我再次测试它.

当我从简单的例子开始,一切都很好.如果我将我的iPhone置于平面模式,我在启动网站时会收到一条离线消息,但随后我可以查看结果.

当我添加一些我的资产(页面中的HTML代码,1-2个图像等)时,它仍在工作.

如果我然后添加更多资源(例如,css和所有关联的图像),问题就开始了…如果我进入平面模式然后打开页面,我会得到正常的消息(我得到的那个消息)工作),然后另一条消息,要求我重试或取消.如果我取消,该网站只是不显示和应用程序关闭,如果我按下重试按钮,我会一次又一次得到相同的消息….

我真的不知道该怎么做.每次我都会在测试之前验证我的缓存清单,每次我更改URL以确保所有内容都重置.

这是否与缓存文件的权重有关?
是否有大小或文件的限制?

一个评论:在测试之前,我总是在计算机的控制台中检查我的页面,以确保它不是一个明显的问题.实际上,每次尝试都会在桌面浏览器上获得成功,并加载所有资产.

你知道那可能来自哪里吗?

编辑:
我再次做了很多测试,仍然无法让它工作.

以下是情况的摘要

>
这是我正在测试的版本:http://daviddarx.com/stuffs/work/custom/61/

2.
这是我的缓存清单:http://daviddarx.com/stuffs/work/custom/61/manifest.appcache
根据http://manifest-validator.com/,它完全有效.

3.
当我在chrome(桌面)上加载页面并在控制台显示时,一切正常.所有元素都被缓存,如果我刷新,缓存就可以了.

4.
当我在桌面chrome上加载页面并查看网络面板时,我可以看到所有内容都是从缓存中加载的.没有丢失的文件.

5.
当我从任何互联网断开台式电脑时,它正在工作!如果我在没有任何连接的情况下使用chrome浏览网站,我可以显示页面,一切都很好,我希望它可以在我的Iphone上.

6.
当我第一次使用我的iPhone并访问该网站时,一切正常.移动safari控制台中没有任何错误.如果我打开“平面模式”并返回到safari,我可以显示我所在的页面(我以前无法实现).但是,如果我尝试更改页面,它只是警告我“无法打开页面”,然后取消请求.我只能留在当前页面上.

我的台式电脑上的一切都很完美,但它只是在我的Iphone上工作.

你有什么主意吗?
你可以在桌面和iPhone浏览器上试试吗?

解决方法

分析你的/ 61 /测试版:

JS函数preloadDetailImages从CSS类内容提取背景图像URL,并将其作为src属性放入新的Image对象中.然后将此图像添加到DOM中,显然是为了让浏览器预加载它.但是,CSS定义中的URL周围的双引号不会被删除,因此最终会成为src属性值的一部分.这会产生一个损坏的URL,显然没有缓存,因此不能脱机工作.

这是CSS定义:

#websiteContainer #customContainer .content {
    background-image: url("../images/custom_part_background.jpg");
}

使用此JS代码,您可以提取url()中的所有内容,包括双引号:

$($(".content")[actualImageLoadingID]).css("background-image")
.split("url(")[1].split(")")[0]

这就是文档中的内容(注意& s;):

<img src="&quot;http://daviddarx.com/stuffs/work/custom/61/mobile/images/custom_part_background.jpg&quot;" style="display: none;">

由于双引号可以是有效的URL部分,因此浏览器会将其解释为相对路径并尝试检索
从您的服务器/stuffs/work/custom/61/%22http://daviddarx.com/stuffs/work/custom/61/mobile/images/custom_part_background.jpg%22.我可以在我的http嗅探器中看到它.

解决方案:删除CSS定义中的引号或在JS函数中过滤掉它们.

这可能不是你在iPhone上缓存问题的主要原因,我宁愿把它添加评论,但还没有特权.

原文地址:https://www.jb51.cc/html5/168280.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。