Question

我使用带有iframe的jQuery UI对话框，以便提供页内＆＃34;弹出窗口＆＃34;用于编辑。每次打开对话框时，它都会向浏览器添加两个请求到历史记录：一个用于打开时加载的URL，另一个用于在关闭对话框时将src设置为空白。如果最终用户点击后退按钮，则他们看不到任何正在发生的事情，因为它会返回iframe中不再显示的内容。

所以，我理解为什么这种情况正在发生，但我无法弄清楚如何预防它。有没有办法去＆＃34;倒带＆＃34; iframe关闭时的历史记录？

$(document).ready(function() {
    var $iframe = $('<iframe id="uiDialogIframe" data-reload="0" frameborder="0" marginwidth="0" marginheight="0" width="800" height="450" />');
    var $dialog = $('<div id="uiDialogIframeWrapper" />').append($iframe).appendTo('body').dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        width: 'auto',
        height: 'auto',
        close: function () {
            $iframe.attr('src', '');
            if ('1' === $iframe.attr('data-reload')) {
                location.reload();
            }
        }
    });
    $('a.uiDialogIframe').on('click', function (e) {
        e.preventDefault();
        var $this = $(this);
        $iframe.attr('src', $this.attr('href'));
        $dialog.dialog('option', 'title', $this.data('title'))
                .dialog('open');
    });
});

Answer 1

使用html5似乎你可以用历史对象

做一些很好的新事物

一些additional information from mozilla

这是来自here的模糊信息，因此您可以添加一些额外的代码来控制这些加载如何影响历史记录。

当状态改变时，例如用户打开电子邮件，history.pushState（）传递状态信息并执行。这样可以启用后退按钮，但重要的是 - 不会将用户从页面移开。
您可以根据需要多次运行history.pushState（），也可以使用history.replaceState（）修改当前状态。
当用户单击（或向前）时，会触发window.onpopstate事件。处理程序函数可以检索关联状态并显示相应的屏幕。

可能不是100％，但这应该让你在正确的位置找到它。

Answer 2

我最终通过每次重新创建iframe来避免创建历史记录。

父脚本

$(document).ready(function() {
    var $dialog = $('<div id="uiDialogIframeWrapper" data-reload="0" />').appendTo('body').dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        width: 'auto',
        height: 'auto',
        close: function () {
            // check for reload flag
            if ('1' === $dialog.attr('data-reload')) {
                location.reload();
            }
        }
    });
    $dialog.on('goto', function(e, url) {
        $dialog.empty().append('<iframe frameborder="0" marginwidth="0" marginheight="0" width="800" height="450" src="' + url + '" />');
    });
    $('a.uiDialogIframe').on('click', function (e) {
        e.preventDefault();
        var $this = $(this);
        $dialog.trigger('goto', $this.attr('href'))
                .dialog('option', 'title', $this.data('title'))
                .dialog('open');
    });
});

儿童剧本

$(document).ready(function() {
    // get the dialog object
    var $dialog = parent.jQuery('#uiDialogIframeWrapper');
    // flag the parent to reload
    $('.parentReload').on('click', function() {
        $dialog.attr('data-reload', '1');
    });
    // close the dialog
    if (0 < $('body.closeDialog').length) {
        $dialog.dialog('close');
    }
    // use goto for internal links
    $('a[href^="/"]').on('click', function(e) {
        e.preventDefault();
        $dialog.trigger('goto', $(this).attr('href'));
    });
});

jQuery UI对话框iframe - 关闭时从浏览器历史记录中删除

2 个答案: