大佬教程收集整理的这篇文章主要介绍了jQuery Mobile：重新加载/深度链接/书签通过AJAX添加到DOM的页面时中断，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
首先,我在我的示例站点根文件夹(即/index.html)中有一个index.html页面,如下所示：
<!DOCTYPE html> <html> <head> <title>Home Page</title> <Meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <Meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script> </head> <body> <!-- main page --> <div data-role="page" data-theme="b" id="main"> <div data-role="header" data-theme="b"> <h1>Home Page</h1> </div><!-- /header --> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li><a href="news/">News</a></li> </ul> </div><!-- /content --> </div><!-- /main page --> </body> </html>
我在名为’news’的文件夹(即/news/index.html)中有第二页,如下所示：
<div data-role="page" data-theme="b" data-add-BACk-btn="true" id="news"> <div data-role="header" data-theme="b"> <h1>News</h1> </div><!-- /header --> <div data-role="content"> TODO: page content goes here </div><!-- /content --> </div><!-- /#news page -->
所以,这很有效. “主页”加载正常.浏览器地址字段显示http://m.example.com/.
我可以点击“新闻”链接将该页面加载到DOM中.浏览器地址字段现在显示http://m.example.com/news/.这就是我的问题所在.如果单击浏览器重新加载按钮,则会重新加载/news/index.html页面,但完全缺少主页面上下文,因此没有jQuery,css或正确的HTML文档结构.鉴于URL及其文档内容,我希望是这种情况.但是,当我从移动网站外部深层链接时,我需要链接到子页面.
如果您使用http://m.example.com/#news/链接到子页面,则可以正常加载子页面,并且浏览器地址字段会自动重写为http://m.example.com/news/ .这样做的问题是人们需要知道他们需要在书签,推文,电子邮件等页面URL时手动编辑URl.
我的示例站点根文件夹(即/index.html)中的index.html页面现在看起来像这样：
<!DOCTYPE html> <html> <head> <title>Home Page</title> <Meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <Meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script> <script type="text/javascript"> if( window.firstload === undefined ) { window.firstload = true; } </script> </head> <body> <!-- main page --> <div data-role="page" data-theme="b" id="main"> <div data-role="header" data-theme="b"> <h1>Home Page</h1> </div><!-- /header --> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li><a href="news/">News</a></li> </ul> </div><!-- /content --> </div><!-- /main page --> </body> </html>
我在名为’news’的文件夹中的第二页(即/news/index.html)现在看起来像这样：
<script type="text/javascript"> if(window.firstload === undefined) { for(var i=0,c=0; i < window.LOCATIOn.href.length; i++){ if(window.LOCATIOn.href.charAt(i) == '/') { c++; if(c==3) window.LOCATIOn = window.LOCATIOn.href.substr(0,i) + '/#' + window.LOCATIOn.href.substr(i); } } } </script> <div data-role="page" data-theme="b" data-add-BACk-btn="false" id="news"> <div data-role="header" data-theme="b"> <a href="#main" data-icon="arrow-l" data-iconpos="notext" data-direction="reverse"></a> <h1>News</h1> <a href="#main" data-icon="home" data-role="button" data-iconpos="notext" data-transition="fade">Home</a> </div><!-- /header --> <div data-role="content"> TODO: page content goes here </div><!-- /content --> </div><!-- /#news page -->
点击子页面上的重新加载或深层链接/书签,现在可以将访问者反弹到主页面,然后正确地加载到子页面中.在子页面中,重定向生成为http://m.example.com/#/news/.
希望这些信息可以节省其他人几个小时的敲击键盘.
以上是大佬教程为你收集整理的jQuery Mobile：重新加载/深度链接/书签通过AJAX添加到DOM的页面时中断全部内容，希望文章能够帮你解决jQuery Mobile：重新加载/深度链接/书签通过AJAX添加到DOM的页面时中断所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。