是的你可以. (很抱歉回答我自己的问题,我认为这是一个有趣的解决方案)

我在幻灯片#12上找到了代码示例的大纲.

我已经在http://m.bbref.com/实现了这一点(仍处于测试阶段)

在创建新版本时,您必须使用脚本URL的版本控制来刷新缓存,但这适用于具有localStorage的页面,并且在localStorage不可用时也可以使用.我在页脚中添加了一些调试代码,以显示js的加载位置.

我把它分成了一个标题和一个页脚的脚本.这些内联显示.

在标题中(我把它放在这里,因为我们使用modernizr将一些类添加到html标记中,我希望那些尽可能快地用于渲染目的.可以移动到页脚.

// .001 is the current js version

// this script assumes it is in the root web directory.

var js_file = "site_lib.001.js";

// vars to store where the file is loaded from.

var _mob_load_js = false;

var _mob_ajax_load_js = false;

{

// if we have localStorage and the files exists there get it.

if(window.localStorage && window.localStorage[js_file]) {

// eval the js file.

try{

window.eval(window.localStorage[js_file]);

// successfully eval'ed the code, so

// we don't need to download it later.

_mob_load_js = true;

} catch (e) { _mob_load_js = false; }

}

else if (window.localStorage) {

// We have localStorage, but no cached file, so we

// load the file via ajax, eval it and then store

// the file in localStorage

// To remove previous versions, I remove all of our localStorage,

// This is extreme if we store other vars there.

window.localStorage.clear();

// standard ajax request.

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

if (xhr.readyState == 4) {

// eval the js

try {

window.eval(xhr.responseText);

// successfully eval'ed the code, so

// we don't need to download it later.

_mob_ajax_load_js = true;

} catch (e) { _mob_ajax_load_js = false; }

try {

// store the js.

window.localStorage[js_file] = xhr.responseText;

} catch (e) {}

}

else {

return;

}

};

xhr.open("GET",js_file,true);

xhr.send();

}

};

并在页脚中(出于性能原因).我放置标准加载方法.请注意,只要您设置了过期标头,使用此分支的浏览器都会正确缓存.

// We haven't loaded the js yet, so we create a script

// tag and get the script the old fashioned way

if (!_mob_load_js && !_mob_ajax_load_js) {

var script=document.createElement("script");

script.type="text/javascript";

script.src=js_file;

document.getElementById("sr_external_script").appendChild(script);

// add a note to the footer

document.write('

loaded from server and not stored

');

}

else if (!_mob_load_js) {

// add a note to the footer

document.write('

loaded via ajax and stored in localStorage

');

}

else {

// add a note to the footer

document.write('

loaded from localStorage

');

}

我已经在chrome和safari中确认js是从localStorage加载的,并且站点功能按预期工作,并且没有向服务器发出请求.我已经确认,当在IE或Firefox上运行时,它会加载脚注中的脚本.

注意:我添加了代码来包装try catch中的evals,因为我在firefox中遇到了问题.

iphone html5 浏览器缓存文件,如何使用html5 localStorage在iphone Safari上缓存javascript?...相关推荐

  1. iphone html5 浏览器缓存文件,html5中localStorage 在苹果设备上总结

    前端时间做开发的时候,用到localStorage,但是在苹果设备上出现了问题,就是在苹果设备上的浏览器中无法存储,最后花了点精力,找到了问题所在--浏览器的无痕模式,因为一般默认的是无痕模式,在无痕 ...

  2. Html5浏览器支持

    HTML5 浏览器支持 把 HTML5 元素定义为块级元素 语义块级displayblock实例 header, section, footer, aside, nav, main, article, ...

  3. 无插件无 Flash HTML5 浏览器直接玩《Quake II》

    HTML5 的能力究竟有多强?在游戏方面是否能超过Flash?看过这个视频 就能见分晓. 为了展示HTML5浏览器的游戏能力,Google Web工具包团队的工程师专门制作了基于HTML5技术的经典第 ...

  4. 支持html5浏览器速查

    css3属性,各个浏览器支持, 看来还是chrome 和safai全盘支持 css3选择器的支持情况: 情况还算不错,新版的基本都支持 html5 web应用 safari 对html5  web应用 ...

  5. html5+调用safari,Safari浏览器不酷,HTML5无效元素; JavaScript是

    我使用JavaScript来生成一个图像对象,然后使用jQuery来改变它的属性,包括一个.load函数.在找到Safari(ver 5.0.5)的错误控制台(当最后不难发现时最令人沮丧)之后,我们发 ...

  6. HTML5 浏览器支持(怎么样让低版本浏览器支持html5?)

    你可以让一些较早的浏览器(不支持HTML5)支持 HTML5. 现代的浏览器都支持 HTML5. 此外,所有浏览器,包括旧的和最新的,对无法识别的元素会作为内联元素自动处理. 正因为如此,你可以 &q ...

  7. [html] 浏览器是怎么对HTML5的离线储存资源进行管理和加载的

    [html] 浏览器是怎么对HTML5的离线储存资源进行管理和加载的 在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根 ...

  8. 手机最好的html5浏览器,综合能力的较量 8大手机浏览器半年横评

    1前言 2015年的移动互联网,主战场已经远离浏览器这个产品线,然而作为移动生态中不可或缺的一环,浏览器仍然是众多用户需要面对选择的一项.作为历年横评项目中的一员,手机浏览器仍然出现在了本次半年度横评 ...

  9. 支持html5特性的浏览器,五大主流浏览器对CSS3和HTML5特性支持情况的详细清单

    [IT168评估]主要主流浏览器对CSS3和HTML5的支持变得越来越完整,曾经打动了许多前端开发人员的IE系列也开始接受该标准.就在几天前,W3C HTML5社区负责人Shelley宣布HTML5的 ...

最新文章

  1. 最近有不少网友给我的书提出了问题,并要求尽快出版第二版
  2. Android 自定义 View 中 onKeyDown监听 没反应
  3. spring14-----AOP之通知参数
  4. matlab语音信号分析实验报告,DSP实验二 语音信号分析与处理,南京理工大学紫金学院实验报告,信号与系统...
  5. 你愿意隐姓埋名一辈子吗?” #百年百人系列
  6. 人工智障学习笔记——机器学习(7)FM/FFM
  7. 实验1 数字图像处理的MATLAB基础,《数字图像处理(实验部分)》实验1_数字图像处理中MATLAB使用基础...
  8. 有一个分数序列:2/1,3/2,5/3,8/5,13/8,21/13...求出这个数列的前20项之和
  9. Exceptions, Catch, and Throw(Chapter 10 of Programming Ruby)
  10. redis mysql 雪崩_Redis缓存雪崩、缓存穿透、并发等5大难题,你有没有解决方案
  11. sas ods html的作用是什么意思,SAS ODS
  12. 使用虚拟机win7安装_STEP7 V5.6
  13. DOM元素节点属性outerHTML和innerHTML
  14. 安全产品的部署方式及位置
  15. [dlang](4)自定义的mysql orm工具
  16. 2022年河北专接本计算机高数一考试大纲
  17. 程序员最新面试谈薪指南
  18. NCBI上查看SNP位点在哪个基因座上(locus)
  19. 基于开源应用快速构建HTAP系统(2)-阿里云开发者社区
  20. 关于运行opendaylight时client: JAVA_HOME not set; results may vary

热门文章

  1. 浅谈HTML5+css3新标签和特性
  2. C++语言中的“不等于号”
  3. ICDE 2021: 针对具有噪音和低采样率轨迹的时空相似算法(附论文链接)
  4. Java 线程 - 基础及工具类 (二)
  5. java操作ffmpeg+ffmpeg使用
  6. php提交成功js弹窗,基于JS+HTML实现弹窗提示是否确认提交功能
  7. ios怎么打开c语言文件夹,iOS中打开的文件如何用其他应用打开选择自己的app
  8. Android Studio模拟器无法连接网络
  9. div设置背景图background:url
  10. 如何有效阻止u盘中毒(没联网未安装杀毒软件情况下)