将history.js与动态(ajax)模式框一起使用

Question

我有一个模式框(Twitter Bootstrap),我试图在各种动作中控制:

1. 用户单击链接>显示模式框,更改(pushstate)URL.
2. 用户隐藏模式框>将URL更改为上一页.
3. 用户单击后退按钮>隐藏模式框,URL更改为上一页.
4. 用户单击前进按钮>显示模式框,更改(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"页面与模态情况略有不同.

希望这可以帮助!