Question

我目前正在使用jQuery mobile进行网络项目，但导航无法正常工作。

当我从菜单中点击页面时（例如“客户”），网址显示正确（www.aaa.bb/#customers）并且页面加载没有任何问题。当我点击另一个页面时，网址也正确并且页面加载但是当我尝试使用浏览器的后退按钮返回时，即使网址更改正确，页面也不会更改。

我有不同页面的单独文件。这会导致问题吗？

如果是这样，为什么网址会正确更改呢？

谢谢！

编辑：在我的网页上启用了Ajax

Answer 1

如果您使用AJAX在整个站点中导航，则必须使用history.pushState自行更新历史记录，因为否则您的HTTP（ajax）调用将不会被记录并存储在历史记录中。

有多种方法可以操作历史记录，或者更改AJAX调用的触发方式，here是一个关于如何操作浏览器历史记录的可靠文档，通过创建一个检查{{1触发的事件并更新您的页面。

Answer 2

经过几个小时的阅读文档和测试不同的尝试，我写了这个解决方案：

$(window).on("navigate", function(){
    var file="/";

    if(typeof history.state.pageUrl != 'undefined') {
        file += history.state.pageUrl + ".php";
    }

    else{
        file += "index.php";
    }


    $(":mobile-pagecontainer").pagecontainer( "change", root + file, {"reverse": true} );
});

此解决方案仅适用于我的特定问题，可能不适用于其他人。

已知限制：

您所有的jQuery Mobile页面都必须位于您网站的根目录中
您网页的文件名必须等于其data-url属性
您的所有网页都必须具有相同的文件扩展名（.php）

对话可能也会带来麻烦。导航到我的index.php文件时，我也遇到了一个奇怪的问题。

随着时间的推移，我会改进我的解决方案并再次发布。

jQuery Mobile导航无法正常工作

2 个答案: