Question

我使用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全局配置选项，以避免在某些浏览器中出现不一致的导航行为。”

Answer 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中。

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

1 个答案: