Question

我有一个模式框（Twitter Bootstrap），我试图在各种动作中控制它：

用户点击链接＆gt;显示模态框，更改（pushstate）URL。
用户隐藏模态框＆gt;将URL更改为上一页。
用户点击后退按钮＆gt;隐藏模式框，URL更改为上一页。
用户点击前进按钮＆gt;显示模态框，更改（pushstate）URL。

我的主要问题是第3项和第4项。使用后退/前进浏览器按钮时，模式需要切换（URL更改）

这是我当前的代码，仅适用于操作＃1和＃2：

$(function(){
$(".thumbnail a").live("click", function(){
    msgurl = $(this).attr("href");
    msgid = $(this).attr("data-id");
    history.pushState(null, null, msgurl);

    $.ajax({
        ....
    });
    $("#newmodal").modal({ dynamic: true });
     return false;
});
$('#newmodal').bind('hidden', function () {
    history.back();
})
});

有没有办法使用历史库来实现后退/前进按钮控制，例如history.js？我如何将其实现到我的代码中？

Answer 1

我实际上一直试图做一些非常相似的事情......

到目前为止，我已经取得了所有要点（1-4）的成功，但我仍在努力为HTML4浏览器提供一种更清晰的链接（使用history.js会产生一个丑陋的http://domain.org/page/page#-http://domain.org/modalpage这是不可链接的。）

以下是让您工作的一些提示：

确保绑定到onpopstate事件。这样，您可以捕获浏览器的前进和后退按钮，并找出要执行的操作：

window.onpopstate = function(e) {
var State = e.state;
if (!State) { //i.e., we've gone to the history context (no active state)
    $('#modal').modal('hide');
}
else {//Re-open state modal
    var modalURL = State.URL.substring(State.URL.indexOf('?show=')+6);
    openModal(appRoot+modalURL, State);
}
}

onpopstate函数并不完美，因为您无法访问以前的状态对象（或者至少我找不到办法），因此您可能希望在URL中附加变量。在我的示例中，我的URL附加了“？show = relativeModalLink /”，因此我知道打开模态的页面。这样，您还可以使用服务器端代码来检测是否传递了show URL变量，并将用户定向到模态页面或将它们带回主页并打开模态（优先级）。

你检查状态是否为空的原因是因为当你加载页面时，浏览器实际上会有一个状态，它只是null。因此null可以被视为缺少模态。

打开模态时，请执行以下操作：

function openModal(modalLink, state) {    
if (state === undefined) {
       var shortLink = modalLink.substring(modalLink.indexOf(appRoot)+appRoot.length);
       var stateLink = document.location.href.indexOf('?show=') === -1 ? document.location.href+'?show='+shortLink : document.location.href;
       history.pushState({'type': 'modal','URL':stateLink},'',stateLink);
    }
}

请注意，我将状态传递给了我的开放模态函数，因为我们不希望在用户使用了前进按钮并移动到预先存在的模态状态的情况下推送另一个状态。

这有点特定于我的实现，因此您的链接系统可能会有所不同。

另外还有一个问题：确保将window.history.back（）函数直接绑定到bootstrap的关闭按钮（不要将它放在bootstrap的'hidden'模态函数中）。这样，用户按下后不会在我的代码中将页面移回两次（因为在onpopstate函数中我调用.modal（'hide'））。我还没有找到一种方法来检测是否按下了后退按钮，或者是否使用bootstrap的“隐藏”功能中的关闭按钮关闭了模态（事实上，我认为这不可能......）。

要实现history.js，只需在页面上包含脚本即可。在HTML5浏览器中它将被忽略，并且它似乎可以在HTML4浏览器中使用上述代码（减去前面提到的丑陋URL问题）。 history.js文档中的实现说明不同，但“ajaxifying”页面与模态情况略有不同。

希望这有帮助！

将history.js与动态（ajax）模式框一起使用

1 个答案: