Question

（更新：看起来这个问题只与chrome有关。在Safari和Firefox中运行正常。）

我正在尝试使用带有Boostrap 3.2模式窗口的HTML5 History API操作URL。

想象一下这是一个包含多张照片的单一网页应用页面。当用户点击照片时，会显示模态窗口并加载远程内容（URL将更改为远程内容之一）。

以下是我要实施的所有用例：

用户点击照片。显示弹出窗口，URL已更改（完成）
用户关闭弹出窗口（后退按钮或关闭按钮）。 URL返回到原始页面之一（DONE）
现在用户点击“前进”按钮。显示上一个弹出窗口（完成）
在打开弹出窗口的页面上，用户访问外部网站，然后返回我的网站。（坚持这个！）。

无法找到实施＃4的方法。当用户返回时，URL是弹出窗口的远程内容之一，但不是重新加载页面（内容可以在弹出窗口中或作为独立页面访问），浏览器（在Chrome中测试）只显示AJAX的内容之前加载的弹出窗口。

有关如何解决此问题的任何想法？

到目前为止，这是我的代码：

// Open Popup
$(document).on('click', '.popup-link', function (e) {
    e.preventDefault();
    var path = $(this).attr('href');
    state = {action: 'popup'};
    $('#popup').modal({
        remote: path,
    });
    // Change URL in browser
    history.pushState(state, '', path);
});

// Restore URL when popup is closed
$(document).on("hidden.bs.modal", function (e) {
    // Empty modal window
    $(e.target).removeData("bs.modal").find(".modal-content").empty();
    var currentstate = history.state;
    if (currentstate) {
        history.back();
    }
});

// Listen for history state changes
window.addEventListener('popstate', function(e) {
    var state = history.state;
    // back button pressed. close popup
    if (!state) {
        $('.modal-open #popup').modal('hide');
    }
    else {
        // Forward button pressed, reopen popup
        $('#popup').modal({
            remote: window.location.href,
        });
    }
});

更新

该问题似乎与Chrome缓存有关。我通过将参数附加到弹出内容的远程URL（例如&popup=1）来部分修复错误。现在，当用户访问外部网站并返回弹出URL（在没有参数的情况下按下历史记录）时，Chrome会重新加载弹出页面。如果用户再次单击后退按钮并返回主页NOTHING HAPPENS，则只更新浏览器栏中的URL ...如果用户访问外部，则无法找到重置历史状态的方法现场。任何帮助都会非常感激

Answer 1

您应该在新加载的页面后检查e.state。校验你的event.state来自historyApi

   if(event.state.length > 0) {
//do something,
// or show modal window
} else {
 //have no items (it's means new loading page)  
 // or hide modal window. 

}

//并添加到路径href“？randomNumber”它将强制Chrome，不要//为您的页面使用缓存

Bootstrap模式和HTML5历史API

更新

1 个答案: