jqueryMobile页面跳转ajax载入与缓存问题
来源:互联网 发布:javascript主要用途 编辑:程序博客网 时间:2024/05/18 01:17
页面跳转ajax载入
在jqueryMobile的开发当中我们经常会遇到一些问题:
1、无法跳转到后一个页面
2、跳转到后一个页面事件或样式失效,需刷新一次可恢复正常
原因:JQM,为了是页面访问速度加快,每一个链接都是通过AJAX 方式进行载入,不会加载新页面head 区域的内容。
一般我们引入的css和js都会在head里面,所以我们事件或样式的失效就不足为奇了。
而不重新加载新页面head 区,下面js调用就可能出错,这也许就是为什么无法跳到后一个页面的原因吧。
解决办法:
1、a标签中加入属性(禁止局部ajax跳转)
2、a标签中加入属性(禁止局部ajax跳转)
3、载入页面是在js中加入代码(禁止全局ajax跳转)
通过AJAX 方式进行载入的可用之处
1、页面访问速度加快
2、返回上一个页面定位到原来的位置,这个其中很有用。类似刷微博,不用每次跳转页面回来从头刷
注意
既然ajax载入不会加载head区,那后面一个页面要用到的css和js都要一次引入,并且两个页面定义的ID不能重复
缓存问题
或者js中加入
页面预加载(a链接上加入data-prefetch="true")
解决了page缓存的问题,那么又会遇到page里的js问题。例如我希望把page的dom缓存下来,但是我又希望每次这个page显示的时候,触发执行一些js,那么这个时候我们在对应page的事件处理时,就不能用 pageinit而是要用pageshow了,因为pageinit只在这个page从dom加载进来时触发,如果page缓存了,那么pageinit只会在第一次时触发。
除了pageshow,还有pagehide、pageremove、pagebeforeshow、pagebeforehide等等事件响应,都是可以针对不同的需求使用的。
在jqueryMobile的开发当中我们经常会遇到一些问题:
1、无法跳转到后一个页面
2、跳转到后一个页面事件或样式失效,需刷新一次可恢复正常
原因:JQM,为了是页面访问速度加快,每一个链接都是通过AJAX 方式进行载入,不会加载新页面head 区域的内容。
一般我们引入的css和js都会在head里面,所以我们事件或样式的失效就不足为奇了。
而不重新加载新页面head 区,下面js调用就可能出错,这也许就是为什么无法跳到后一个页面的原因吧。
解决办法:
1、a标签中加入属性(禁止局部ajax跳转)
1
data-ajax=
"false"
2、a标签中加入属性(禁止局部ajax跳转)
1
rel=
"external"
3、载入页面是在js中加入代码(禁止全局ajax跳转)
1
$.mobile.ajaxEnabled=
false
;
通过AJAX 方式进行载入的可用之处
1、页面访问速度加快
2、返回上一个页面定位到原来的位置,这个其中很有用。类似刷微博,不用每次跳转页面回来从头刷
注意
既然ajax载入不会加载head区,那后面一个页面要用到的css和js都要一次引入,并且两个页面定义的ID不能重复
缓存问题
链接时,通过 AJAX, 将链接页面的PAGE 部分,载入至 首页。 而为了防止内存占用过高,使浏览内存较低的设备出现浏览器崩溃的情况。 JQM 只会缓存一个页面至页面中 。当请求另一个页面时,即将上一个页面的PAGE 区的DOM 移除。当在返回这个页面时,从历史记录中,重新加载该页面。
强制缓存页面的方法
在页面的page 上加入
1
data-dom-cache=
"true"
1
$.mobile.page.prototype.options.domCache =
true
;
页面预加载(a链接上加入data-prefetch="true")
1
//a链接
2
<a href=
"#"
data-prefetch=
"true"
> ... </a>
3
//js也可以
4
$.mobile.loadPage(PageUrl,{showLoadMsg:
false
});
解决了page缓存的问题,那么又会遇到page里的js问题。例如我希望把page的dom缓存下来,但是我又希望每次这个page显示的时候,触发执行一些js,那么这个时候我们在对应page的事件处理时,就不能用 pageinit而是要用pageshow了,因为pageinit只在这个page从dom加载进来时触发,如果page缓存了,那么pageinit只会在第一次时触发。
1
$(
"#page_id"
).bind(
"pageshow"
,
function
(){
2
//页面每次显示你需要做的
3
})
// 去掉缓存 重新加载
1. 是否有加 data-dom-cache="true",有的话直接去掉,
2. 使用$.mobile.changepage(B页面,{reloadpage:true});
0 0
- jqueryMobile页面跳转ajax载入与缓存问题
- Ajax页面缓存问题分析与解决办法
- Ajax页面缓存问题分析与解决办法
- Ajax页面缓存问题分析与解决办法
- jquerymobile 页面跳转闪屏问题并且引入动画效果
- ajax载入页面js失效的问题
- JqueryMobile页面跳转传值
- jQuerymobile 的页面跳转 原理
- 分组、页面跳转与ajax
- 解决Ajax页面缓存问题
- jquerymobile页面跳转和参数传递
- JQueryMobile页面跳转参数的传递解决方案
- jquerymobile页面跳转和参数传递
- jquerymobile页面跳转和参数传递
- JQueryMobile页面跳转参数的传递解决方案
- JQueryMobile页面跳转参数的传递解决方案
- jquerymobile页面跳转和参数传递
- jquerymobile页面跳转和参数传递
- C语言静态库动态库
- android shape的使用
- Android(Activity/Fragment)获取控件的大小
- 奇怪的for 循环
- ios 跳转appstore评论页面
- jqueryMobile页面跳转ajax载入与缓存问题
- Web验证码实现机制
- File 里面的flush()和close()
- jquery multiselect动态加option,需要调用refresh方法才能刷新option
- C++:sizeof问题
- SDUT3184 Fun House(模拟)
- 黑马程序员--IOS学习笔记(封装、继承、多态)
- KMP算法详解
- Python实用库收集