- 阅读权限
- 255
- 威望
- 1 级
- 论坛币
- 84520 个
- 通用积分
- 11312.4871
- 学术水平
- 666 点
- 热心指数
- 821 点
- 信用等级
- 732 点
- 经验
- 398874 点
- 帖子
- 16369
- 精华
- 0
- 在线时间
- 3321 小时
- 注册时间
- 2016-7-9
- 最后登录
- 2024-6-4
大师
还不是VIP/贵宾
- 威望
- 1 级
- 论坛币
- 84520 个
- 通用积分
- 11312.4871
- 学术水平
- 666 点
- 热心指数
- 821 点
- 信用等级
- 732 点
- 经验
- 398874 点
- 帖子
- 16369
- 精华
- 0
- 在线时间
- 3321 小时
- 注册时间
- 2016-7-9
- 最后登录
- 2024-6-4
| 开心 昨天 09:09 |
---|
签到天数: 2536 天 连续签到: 2 天 [LV.Master]伴坛终老
|
经管之家送您一份
应届毕业生专属福利!
求职就业群
感谢您参与论坛问题回答
经管之家送您两个论坛币!
+2 论坛币
离线应用
Web应用程序在离线状态下也能正常工作,需要将Web应用程序的资源文件缓存在本地,当无法访问互联网时,还可以使用缓存文件运行Web程序
访问一个网页时,浏览器缓存会将该网页所需要的所有资源缓存在本地:HTML文件、CSS文件、JavaScript脚本等(只服务于一个页面)
本地缓存可以很好地为整个Web应用程序服务,可以指定具体的缓存内容。(通过cache Manifest)
Cache Manifest的基本用法
给网页添加Cache Manifest文件
示例:
CACHE MANIFEST
# VERSION 1.0
# 直接缓存的文件
CACHE:
action.html
topbox.css
topbox.js
images/topbox.png
# 需要在线缓存的文件
NETWORK:
online.html
# 替代方案
FALLBACK:
online.js offline.js
CACHE:
images/midbox.png
服务器必须支持text/cache-manifest这个MIME类型才能正确使用离线缓存
若使用的是Apache服务器,需要在设置中找到mime.types文件,然后在文件的最后,添加:
text/cache-manifest manifest
若使用的是IIS,则需在属性对话框中,选择HTTP头标签,在MIME映射下,单击文件类型按钮,在关联扩展名文本框中输入“manifest”,在内容类型文本框中输入text/cache-manifest
在线状态监测:
HTML5中,可以通过navigator.onLine属性检测当前浏览器是否在线。如果返回true,则表示浏览器在线。
因要获取当前网络状态,还需要在网络状态发生变化时触发online 或 offline事件,通知用户当前网络状态的变化。(一般在body元素上,并沿着document.body、document、window的顺序向上传递)
创建离线应用的示例:
<!DOCTYPE html>
<html manifest="index.appcache">
<head>
<title>9.3.1</title>
<meta charset="utf-8" />
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<img src="MyImage.png" id="MyImage" width="300" height="180" />
<hr />
<input type="button" value="监测浏览器状态" name="myButton" />
<h2 id="msg"></h2>
<hr />
<h2>替代资源<img src="ImgOnLine.png" id="FallBackImg" width="20" height="20" /></h2>
</body>
</html>
示例中的index.appcache文件:
CACHE MANIFEST
# VERSION v1.0
CACHE:
MyImage.png
index.js
ImgOffLine.png
NETWORK:
*
FALLBACK:
ImgOnLine.png ImgOffLine.png (即用ImgOffLine.png 替代 ImgOnLine.png)
在index.js中,编写:
Function Show(){
var msg=document.getElementById("msg");
if(navigator.onLine){
msg.innerHTML="在线<img id='state' width='20' height='20' src='ImgOnLine.png' />"; }else{
msg.innerHTML="离线<img id='state' width='20' height='20' src='ImgOffLine.png' />";
} }
扫码加我 拉你入群
请注明:姓名-公司-职位
以便审核进群资格,未注明则拒绝
|
|
-
总评分: 论坛币 + 60
查看全部评分
|