个人中心
gpt4 book ai didi

jQuery 移动 : Breaks When Reloading/Deep Linking/Bookmarking Pages Added to DOM via AJAX

转载 作者：行者123 更新时间：2023-12-01 00:11:27 26 4
gpt4 key购买 nike

我正在使用 jQuery Mobile 构建一个移动网站，我的一位测试人员在重新加载、深层链接到我使用标准页面加载功能加载到 DOM 中的任何页面或为其添加书签时指出了一个问题内置于 jQuery Mobile 中。我一直在查看文档、论坛帖子、github bug 列表等，寻找解决方案，但我对我可能做错的事情束手无策。我编写了一个非常基本的两页示例来演示我所看到的内容。

首先，我的示例站点根文件夹(即 /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。

有没有办法自动将浏览器踢回主页，然后触发子页面的加载，对用户透明，从而正确地重新创建 DOM？我错过了什么？

最佳答案

好的，根据 Kane 的建议，我已经修改了示例代码，现在它似乎可以按我想要的方式工作。

我的示例网站根文件夹(即 /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 移动 : Breaks When Reloading/Deep Linking/Bookmarking Pages Added to DOM via AJAX，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9106298/

26 4 0
文章推荐： php - 如何为mysql数据库中的每列更新具有两个不同条件的两列
文章推荐： jquery - 如何将数据动态分配给jqGrid？
文章推荐： jquery - 使用children()将值设置为输入字段
文章推荐： asp.net-mvc-3 - ASP.NET MVC3 : WebGrid + Ajax Filters + Ajax Sorting & Paging
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com