3

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

  1. 用户单击链接 > 显示模式框，更改（推送状态）URL。
  2. 用户隐藏模式框 > 将 URL 更改为上一页。
  3. 用户单击返回按钮 > 隐藏模式框，URL 更改为上一页。
  4. 用户单击前进按钮 > 显示模式框，更改（推送状态）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）来实现后退/前进按钮控制？我将如何在我的代码中实现它？

4

1 回答 1

6

我实际上一直在尝试做一些非常相似的事情……</p>

到目前为止，我在您的所有观点 (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/'，因此我知道模式是在哪个页面上打开的。通过这种方式，您还可以使用服务器端代码来检测是否传递了显示 URL 变量，然后将用户引导至模式页面或将用户带回主页并打开模式（根据偏好）。

而你检查状态是否为空的原因是因为当你加载一个页面时，浏览器实际上会有一个状态，它只是空的。所以 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() 函数直接绑定到引导程序的关闭按钮（不要将其放在引导程序的“隐藏”模式函数中）。这样，用户按下回不会在我的代码中将页面向后移动两次（因为在 onpopstate 函数中我调用了 .modal('hide')）。我还没有找到一种方法来检测是否按下了后退按钮，或者是否使用引导程序的“隐藏”功能中的关闭按钮关闭了模式（事实上，我认为这不可能……）。

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

希望这可以帮助！

于 2012-12-01T22:15:24.273 回答