jquery - Bootstrap 模式和 HTML5 历史 API

Question

(更新:看起来这个问题只与 chrome 有关。在 Safari 和 Firefox 中工作正常。)

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

将其想象成包含多张照片的单个网络应用程序页面。当用户单击照片时，会显示模式窗口并加载远程内容(URL 更改为远程内容之一)。

以下是我想要实现的所有用例:

1. 用户点击照片。显示弹出窗口，更改 URL(完成)
2. 用户关闭弹出窗口(后退按钮或关闭按钮)。 URL 返回到原始页面之一(完成)
3. 现在用户点击转发按钮。显示上一个弹出窗口(完成)
4. 在弹出窗口打开的页面上，用户访问外部网站然后返回我的网站。 (坚持这个!)。

找不到实现#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 会重新加载弹出页面。如果用户再次单击后退按钮并返回主页，则没有任何反应，只有浏览器栏中的 URL 会更新...如果用户访问外部站点，则无法找到重置历史状态的方法。任何帮助将不胜感激

Answer 1

您应该在新加载页面后检查 e.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，不要//为您的页面使用缓存