jqueryMobile页面跳转ajax载入与缓存问题

名站网址导航为大家免费提供关于网站编程方面的知识。

微信小程序，简易开发教程

本篇文章的具体介绍如下请大家仔细看

页面跳转ajax载入在jqueryMobile的开发当中我们经常会遇到一些问题：
1、无法跳转到后一个页面 2、跳转到后一个页面事件或样式失效，需刷新一次可恢复正常原因：JQM，为了是页面访问速度加快，每一个链接都是通过AJAX 方式进行载入，不会加载新页面head 区域的内容。一般我们引入的css和js都会在head里面，所以我们事件或样式的失效就不足为奇了。而不重新加载新页面head 区，下面js调用就可能出错，这也许就是为什么无法跳到后一个页面的原因吧。
解决办法： 1、a标签中加入属性（禁止局部ajax跳转）

data-ajax="false"

2、a标签中加入属性（禁止局部ajax跳转）

rel="external"

3、载入页面是在js中加入具体相关代码如下（禁止全局ajax跳转）

$.mobile.ajaxEnabled=false;

通过AJAX 方式进行载入的可用之处 1、页面访问速度加快 2、返回上一个页面定位到原来的位置，这个其中很有用。类似刷微博，不用每次跳转页面回来从头刷特别注意既然ajax载入不会加载head区，那后面一个页面要用到的css和js都要一次引入，并且两个页面定义的ID不能重复缓存问题链接时，通过 AJAX，将链接页面的PAGE 部分，载入至首页。而为了防止内存占用过高，使浏览内存较低的设备出现浏览器崩溃的情况。 JQM 只会缓存一个页面至页面中。当请求另一个页面时，即将上一个页面的PAGE 区的DOM 移除。当在返回这个页面时，从历史记录中，重新加载该页面。强制缓存页面的方法在页面的page 上加入

data-dom-cache="true"

或者js中加入

$.mobile.page.prototype.options.domCache = true;

页面预加载（a链接上加入data-prefetch="true"）

//a链接
<a href="#" data-prefetch="true"> ... </a>

//js也可以
$.mobile.loadPage(PageUrl,{showLoadMsg: false });

解决了page缓存的问题，那么又会遇到page里的js问题。例如我希望把page的dom缓存下来，但是我又希望每次这个page显示的时候，触发执行一些js，那么这个时候我们在对应page的事件处理时，就不能用 pageinit而是要用pageshow了，因为pageinit只在这个page从dom加载进来时触发，如果page缓存了，那么pageinit只会在第一次时触发。

$("#page_id").bind("pageshow",function(){
//页面每次显示你需要做的
})

除了pageshow，还有pagehide、pageremove、pagebeforeshow、pagebeforehide等等事件响应，都是可以针对不同的需求使用的。 // 去掉缓存重新加载 1.　是否有加　data-dom-cache＝"true"，有的话直接去掉， 2. 使用$.mobile.changepage(B页面，{reloadpage:true});

关于网站编程方面的知识就说道这里了，希望能够对大家有作用。,jqueryMobile,页面,跳转,ajax,载入,与,缓