Question

我正在尝试做一些可能不赞成的事，但我不知道该怎么做。我想要做的是用jQuery捕获特定div的“状态”，如下所示：

var content = $("#Layout").html();

我这样做是因为我想在某处“保存”div的先前内容，将一些内容动态地拉入同一个div（#Layout），然后在用户点击时将旧内容替换回来。现在这一切都有效，但显然我的所有jQuery都需要重新评估（对于像powerTips这样的东西）。

我最初的想法是只使用一些正则表达式来获取<script>变量中的所有content标记并执行eval(matched);之类的操作，但我不认为这是最好的解。

有没有人对如何有效和轻松地完成这项工作有任何想法？如果这是唯一的解决方案，有没有人知道我可以使用什么正则表达式？一直在寻找大约一个小时，并找到了一些文章，但似乎没有什么可以做的。

这是我到目前为止所尝试的完整代码。

$(".loadDialog").live('click', function(e){
    e.preventDefault();
    var url = $(this).attr('data-rel');
    $(".AjaxLoading").show();
    var Layout = $("#Layout");
    previousContent = Layout.html();
    Layout.load(url, function(response, status, xhr) {
        if (status === "error") {
            showErrorDialog();
            Layout.html(previousContent);
        } else {
            //Create a "Back" button
            var backButton = '<div class="iconSprite backButton close-dialog" style="position: relative;"><a href="javascript:" class="close-dialog">Back</a></div>';
            Layout.prepend(backButton)
        }
        $(".AjaxLoading").hide();
    });
    return false;
});

$(".close-dialog").live('click', function(e) {
    e.preventDefault();
    $("#Layout").html(previousContent);
    var scriptMatcher = /<script[\s\S]*?>[\s\S]*?<\/script>/gm;
    var match;
    while (match = scriptMatcher.exec(previousContent)) {
        eval(match);
    }
    return false;
});

请不要讨厌这个，我不是jQuery专家。

谢谢！

Answer 1

您可以使用window.history API以一种很好的方式执行此操作，以浏览器友好的方式跟踪历史记录，同时允许您更改地址栏中显示的URL。

以下代码会保留您传递给它的对象的快照，当onpopstate window事件发生时，可以再次访问：

// load a dialog window
$('.loadDialog').click(function(evt) {
  evt.preventDefault();
  window.history.pushState({
    pageHTML: $('#Layout').html()
  }, 'this title argument may be used', '/page/newpage.any_extension'); 
});

// trigger moving around in the window history
$('#back').click(function() { window.history.back(); });

// triggered when we move around in the window history
window.onpopstate = function(evt) {
  if (event.state.pageHTML) {
    $('#Layout').html(event.state.pageHTML);
  }
};

将div的状态保存到变量中

1 个答案: