引导模式和 HTML5 历史 API答案

【问题标题】：Bootstrap modal and HTML5 history API引导模式和 HTML5 历史 API
【发布时间】：2018-02-22 23:21:23
【问题描述】：

（更新：看起来问题仅与 chrome 有关。在 Safari 和 Firefox 中运行良好。）

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

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

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

用户点击照片。显示弹出窗口，更改 URL (DONE)
用户关闭弹出窗口（返回按钮或关闭按钮）。网址返回到原始页面之一（完成）
现在用户点击前进按钮。显示上一个弹出窗口 (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 会重新加载弹出页面。如果用户再次单击后退按钮并返回主页没有发生任何事情，则仅更新浏览器栏中的 URL...如果用户访问外部站点，则无法找到重置历史状态的方法。任何帮助将不胜感激

【问题讨论】：

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

标签： jquery html twitter-bootstrap-3 bootstrap-modal

【解决方案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，不要//为您的页面使用缓存

【讨论】：