外部链接上的 jQuery Mobile 后退按钮导致奇怪的问题答案

【问题标题】：jQuery Mobile back button on external link causing strange issue外部链接上的 jQuery Mobile 后退按钮导致奇怪的问题
【发布时间】：2012-03-26 22:28:27
【问题描述】：

准确地说，我使用的是 jQuery mobile 1.0.1。我有 2 页。

Index --> Sub Page(external)

我的超链接如下所示：

<a href="sub_page.html" rel="external" data-transition="slide">

我已经在 jQuery 和 jQuery mobile <script> 标签之间添加了这段代码：

$(document).bind("mobileinit", function(){
    $.mobile.ajaxLinksEnabled = false;
});

我的索引和子页面都是完整的页面，有自己的页眉、内容、页脚、css 声明和脚本，这就是我使用外部 rel 的原因。

奇怪的行为：

列表项
我从索引页点击超链接
它打开一个新页面，一切正常
我单击返回。也可以。
我再次单击同一个超链接
子页面再次打开，但在很短的延迟（甚至不到一秒）之后出现“正在加载”并且索引页面出现在子页面内。

如何在同一个域的外部链接上实现一个简单的后退按钮？

编辑我已经解决了这个问题：

$(document).bind("mobileinit", function(){
    $.mobile.pushStateEnabled = false;
});

在 jQuery 和 jQuery Mobile 之间包含。正如 jQM 文档所述：“我们建议禁用 $.mobile.pushStateEnabled 全局配置选项以避免在某些浏览器中出现不一致的导航行为。”

【问题讨论】：

两个页面是否都设置了ajaxlinksenabled？

标签： jquery jquery-mobile

【解决方案1】：

您可以通过将每个页面的所有自定义脚本放在data-role="page" 元素中而不是在文档的<head> 中来使用它，而不是禁用 AJAX 导航。这样，当页面被引入时，代码块将被拉入 DOM。

更好的解决方案是将整个网站的所有自定义 JS 放入单个 .js 包含并将其包含在您网站的每个页面中。这样，无论用户在何处登陆或如何与网站互动（例如刷新页面），您网站的所有代码都将始终可用。

这是我的建议：

<!DOCTYPE html>
<head>
    ...
</head>
<body>
    <div data-role="page">
        ...
    </div>
    <script src="/js/custom-mobile.js"></script>
</body>
</html>

这通常需要通过事件委托进行绑定，这样您就可以编写在特定页面添加到 DOM 时触发的代码。这很重要，因为您无法确定页面何时会出现在 DOM 中。出于同样的原因，您在为元素使用 ID 时需要小心，所有 ID 在站点范围内必须是唯一的，因为多个页面可以/将同时位于 DOM 中。

【讨论】：

我相信这么简单的事情应该不需要任何额外的JS就可以完成。这是基本功能。我只能同意将所有页面放在 data-role="page" div 中，我会这样做。感谢您帮助我们做出决定