请简单描述JqueryMobile页面跳转的事件响应顺序
2017-06-05 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
jQueryMobile页面跳转应注意的事项
页面跳转：
页面跳转时pagebeforechange事件会被触发两次，通过$(document).bind("pagebeforechange", handleChangePage);来绑定pagebeforechange事件的触发函数handleChangePage(e,data),第一次 触发时data.toPage是到达页面的url，类型是string。第二次触发时data.toPage是e.fn.e.init[1](搞不懂具体 是什么东西)。
第二次触发时可以获取到达页面的信息，因此可以在第二次触发时来增加自己的操作，也就是if(typeof data.toPage != “string”).这时可以用e.target.baseURI来获取到达页面的uri，类型是string，然后就可以分析出参数等一些东西。
利用e.target.find(“pageId”)来获取到达页的相应元素加以控制。
“get”方式提交时可以直接解析e.target.baseURI来获取参数
“post”方式提交时可以分析data.options.data来获取参数。也可以在changePage里利用$(“form”).serializeArray()转换为JSON对象（这种方式比较好）或者$(“form”).serialize()转换成字符串。
如果发生中文乱码问题，可以尝试使用decodeURIComponent(str)进行解码。
代码实例：
index.html
<!DOCTYPE html>
<html class="ui-mobile">
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
<META HTTP-EQUIV="expires" CONTENT="0">
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script type="text/javascript" charset="utf-8">
$( document ).delegate("#index", "pageinit", function() {
$(document).bind( "pagebeforechange", beforechange);
});
function beforechange( e, data ) {
if ( typeof data.toPage != "string" ) {
var url = $.mobile.path.parseUrl(e.target.baseURI),
re = /a.html/;
if(url.href.search(re) != -1){
var page = $(e.target).find("#a2");
var d = data.options.data;
page.find("#s").append(decodeURIComponent(d));
}
}
}
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">.header.</div>
<div data-role="content">
<a href="dir1/a.html?p1=112&p2=113">a.html</a><br>
<div id="ccc"><a href="#c" id="cc">cccccc</a><br></div>
<a href="dir2/b.html" data-rel="dialog" data-transition="pop">Open dialog</a>
<form action="a.html" method="post">
姓名：<input type="text" value="23" name="name"/><br>
密码：<input type="text" value="过后" name="pwd"/><br>
<input type="submit" value="submit"/>
</form>
</div>
<div data-role="footer" data-position="fixed">footer</div>
</div>
</body></html>
a.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
<META HTTP-EQUIV="expires" CONTENT="0">
<meta charset="utf-8">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>
<div data-role="page" id="a2" >
<div data-role="header">
.header.
</div>
<div data-role="content">
<a href="../dir2/b.html" >b.html</a>
<br>
<a data-rel="back" href="b.html">back</a>
<div id="s"></div>
</div>
<div data-role="footer" data-position="fixed">
footer
</div>
</div>
</body>
</html>
Jquerymobile加载页面相关知识：
如果采用ajax的方式链接到一个有多page的文档doc1，那么只会加载第一个page，这时就无法在这个page上链接到文档doc1上的其他page了。利用subpage插件可以实现多page文档的加载。
使用ajax方式来跳转到下一个文档时，由于jquerymobile框架的限制不会加载<div data-role=”page”></div>外面的js和css资源，所以把应当把js和css代码放到<divdata- role=”page”></div>里面。
Jquerymobile中推荐在捕获pageinit事件的函数中来操作page里的元素。例：
$( document).delegate("#aboutPage", "pageinit", function() {
alert('Apage with an ID of "aboutPage" was just created by jQuery Mobile!');
});
预加载页面
1、<ahref="prefetchThisPage.html"data-prefetch> ... </a>
2、$.mobile.loadPage( pageUrl, { showLoadMsg: false } );
使用单一页面模式时，通过以上两种方式Jquerymobile会在主界面加载后在后台加载预加载的文件，同时会触发pagecreate事件。
这样能够流畅地转移到预加载的页面而不会显示加载的信息
缓存页面
保留所有访问过的页面
$.mobile.page.prototype.options.domCache = true;
缓存特定的页面
<div data-role="page" id="cacheMe" data-dom-cache="true">
pageContainerElement.page({ domCache: true });
Hash和Ajax页面驱动模型：
通过Ajax形式来跳转页面时，会触发hashchange 事件，jquerymobile在处理这个事件时会修改location.href的值。
Jquerymobile是通过给页面添加 "ui-page-active" 样式来设置显示的页面的。
pushState 插件：
jquerymobile利用 history.replaceState函数将基于hash的长的url转换为更加简洁的完整的文档地址。如果浏 览器不支持 history.replaceState，或者禁用了这一特性，地址栏就会显示基于hash的url（就是带#的url）。
Jquerymobile这时会触发hashchange事件，可以通过$(window).bind("hashchange",function（e）{});来进行捕获
可以在文档完全加载前通过设置$.mobile.pushStateEnabled=false来禁用这一特性。
如果不支持ajax的导航模式，或者设置了 rel="external" 或$.mobile.ajaxEnabled=false，则建议禁用这一特性以获得更加连贯的行为。
小知识：
一、Jquery页面加载函数写法：
1）
$(document).ready(function(){
...
})
2)
$(function(){
...
})
二、jquerymobile中这种写法
(function(window, undefined ) {
...// code goes here
})(window)
前一个括号是声明一个函数，后面的括号是调用这个函数并传参。
函数带undefined参数的目的是防止在外部声明了undefined变量导致错误的引用。
三、使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
history.pushState():改变当前页面的URL，将URL放入浏览器历史里
history.replaceStat():将指定的URL替换当前的URL
如何调用
var state = {
title: title,
url: options.url,
otherkey: othervalue
};
window.history.pushState(state,document.title, url);
如何响应浏览器的前进、后退操作
window对象上提供了onpopstate事件，上面传递的state对象会成为event的子对象，这样就可以拿到存储的title和URL了。
window.addEventListener('popstate',function(e){
if (history.state){
var state = e.state;
//do something(state.url, state.title);
}
}, false);
这样就可以结合ajax和pushState完美的进行无刷新浏览了。
页面跳转：
页面跳转时pagebeforechange事件会被触发两次，通过$(document).bind("pagebeforechange", handleChangePage);来绑定pagebeforechange事件的触发函数handleChangePage(e,data),第一次 触发时data.toPage是到达页面的url，类型是string。第二次触发时data.toPage是e.fn.e.init[1](搞不懂具体 是什么东西)。
第二次触发时可以获取到达页面的信息，因此可以在第二次触发时来增加自己的操作，也就是if(typeof data.toPage != “string”).这时可以用e.target.baseURI来获取到达页面的uri，类型是string，然后就可以分析出参数等一些东西。
利用e.target.find(“pageId”)来获取到达页的相应元素加以控制。
“get”方式提交时可以直接解析e.target.baseURI来获取参数
“post”方式提交时可以分析data.options.data来获取参数。也可以在changePage里利用$(“form”).serializeArray()转换为JSON对象（这种方式比较好）或者$(“form”).serialize()转换成字符串。
如果发生中文乱码问题，可以尝试使用decodeURIComponent(str)进行解码。
代码实例：
index.html
<!DOCTYPE html>
<html class="ui-mobile">
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
<META HTTP-EQUIV="expires" CONTENT="0">
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script type="text/javascript" charset="utf-8">
$( document ).delegate("#index", "pageinit", function() {
$(document).bind( "pagebeforechange", beforechange);
});
function beforechange( e, data ) {
if ( typeof data.toPage != "string" ) {
var url = $.mobile.path.parseUrl(e.target.baseURI),
re = /a.html/;
if(url.href.search(re) != -1){
var page = $(e.target).find("#a2");
var d = data.options.data;
page.find("#s").append(decodeURIComponent(d));
}
}
}
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">.header.</div>
<div data-role="content">
<a href="dir1/a.html?p1=112&p2=113">a.html</a><br>
<div id="ccc"><a href="#c" id="cc">cccccc</a><br></div>
<a href="dir2/b.html" data-rel="dialog" data-transition="pop">Open dialog</a>
<form action="a.html" method="post">
姓名：<input type="text" value="23" name="name"/><br>
密码：<input type="text" value="过后" name="pwd"/><br>
<input type="submit" value="submit"/>
</form>
</div>
<div data-role="footer" data-position="fixed">footer</div>
</div>
</body></html>
a.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
<META HTTP-EQUIV="expires" CONTENT="0">
<meta charset="utf-8">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>
<div data-role="page" id="a2" >
<div data-role="header">
.header.
</div>
<div data-role="content">
<a href="../dir2/b.html" >b.html</a>
<br>
<a data-rel="back" href="b.html">back</a>
<div id="s"></div>
</div>
<div data-role="footer" data-position="fixed">
footer
</div>
</div>
</body>
</html>
Jquerymobile加载页面相关知识：
如果采用ajax的方式链接到一个有多page的文档doc1，那么只会加载第一个page，这时就无法在这个page上链接到文档doc1上的其他page了。利用subpage插件可以实现多page文档的加载。
使用ajax方式来跳转到下一个文档时，由于jquerymobile框架的限制不会加载<div data-role=”page”></div>外面的js和css资源，所以把应当把js和css代码放到<divdata- role=”page”></div>里面。
Jquerymobile中推荐在捕获pageinit事件的函数中来操作page里的元素。例：
$( document).delegate("#aboutPage", "pageinit", function() {
alert('Apage with an ID of "aboutPage" was just created by jQuery Mobile!');
});
预加载页面
1、<ahref="prefetchThisPage.html"data-prefetch> ... </a>
2、$.mobile.loadPage( pageUrl, { showLoadMsg: false } );
使用单一页面模式时，通过以上两种方式Jquerymobile会在主界面加载后在后台加载预加载的文件，同时会触发pagecreate事件。
这样能够流畅地转移到预加载的页面而不会显示加载的信息
缓存页面
保留所有访问过的页面
$.mobile.page.prototype.options.domCache = true;
缓存特定的页面
<div data-role="page" id="cacheMe" data-dom-cache="true">
pageContainerElement.page({ domCache: true });
Hash和Ajax页面驱动模型：
通过Ajax形式来跳转页面时，会触发hashchange 事件，jquerymobile在处理这个事件时会修改location.href的值。
Jquerymobile是通过给页面添加 "ui-page-active" 样式来设置显示的页面的。
pushState 插件：
jquerymobile利用 history.replaceState函数将基于hash的长的url转换为更加简洁的完整的文档地址。如果浏 览器不支持 history.replaceState，或者禁用了这一特性，地址栏就会显示基于hash的url（就是带#的url）。
Jquerymobile这时会触发hashchange事件，可以通过$(window).bind("hashchange",function（e）{});来进行捕获
可以在文档完全加载前通过设置$.mobile.pushStateEnabled=false来禁用这一特性。
如果不支持ajax的导航模式，或者设置了 rel="external" 或$.mobile.ajaxEnabled=false，则建议禁用这一特性以获得更加连贯的行为。
小知识：
一、Jquery页面加载函数写法：
1）
$(document).ready(function(){
...
})
2)
$(function(){
...
})
二、jquerymobile中这种写法
(function(window, undefined ) {
...// code goes here
})(window)
前一个括号是声明一个函数，后面的括号是调用这个函数并传参。
函数带undefined参数的目的是防止在外部声明了undefined变量导致错误的引用。
三、使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
history.pushState():改变当前页面的URL，将URL放入浏览器历史里
history.replaceStat():将指定的URL替换当前的URL
如何调用
var state = {
title: title,
url: options.url,
otherkey: othervalue
};
window.history.pushState(state,document.title, url);
如何响应浏览器的前进、后退操作
window对象上提供了onpopstate事件，上面传递的state对象会成为event的子对象，这样就可以拿到存储的title和URL了。
window.addEventListener('popstate',function(e){
if (history.state){
var state = e.state;
//do something(state.url, state.title);
}
}, false);
这样就可以结合ajax和pushState完美的进行无刷新浏览了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
