Question

我正在尝试在iframe模式下使用FancyBox 2来实现模态编辑对话框。一旦关闭了编辑表单的iframe，我希望能够运行特定代码在父窗口中执行操作，例如重新加载内容。由于服务器端验证，iframe中的表单使用常规表单帖子而不是ajax并且可以进行多次提交。

为了在对话框关闭后在主页面中执行我的代码，我填充了FancyBox afterClose属性。

问题： 如果我在成功提交/验证表单数据后关闭iframe，则iframe会关闭并且afterClose代码会按预期正确执行。问题是到那时窗口历史记录被其他条目损坏了。这意味着，一旦iframe关闭，我需要多次点击后退按钮（等于iframe中提交的数量），以返回托管iframe的页面之前的页面。

为了解决这个问题，我尝试跟踪iframe中的历史深度并执行window.history.go（-depth），然后执行parent。$。fancybox.close（）来关闭iframe。这会处理历史记录问题，但会阻止执行afterClose代码。一些实验表明，在历史记录中回到原始的iframe页面会以阻止afterClose运行的方式杀死FancyBox（父。$。fancybox.close（）甚至没有执行）。

问题： 当按下后退按钮足够多次到达iframe中加载的原始页面时，是否有人知道为什么FancyBox iframe会被破坏？这可以预防吗？当FancyBox iFrame关闭时，是否有不同的方法来回放iFrame历史记录？

示例： 问题说明 in this page 。相同的来源如下：

FancyBoxMain.html：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Main</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js"></script>
    <script type="text/javascript">
        function popup() {
            var options = {
                type: 'iframe',
                href: 'FancyBoxPopup.html',
                height: 250,
                modal: true,
                autoSize: false,
                afterClose: function () { alert('Executing afterClose.'); }
            };
            $.fancybox.open(options);
        };
    </script>
</head>
<body>
    <input type="button" onclick="popup();" value="Popup"/>
</body>
</html>

FancyBoxPopup.html：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Popup</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        var url;
        var depth;

        $(function() {
            var pos = window.location.href.indexOf('?');
            depth = pos == -1 ? 0 : parseInt(window.location.href.substr(pos + 1));
            $('#depth').text(depth);
            url = pos == -1 ? window.location.href : window.location.href.substr(0, pos);
            if (depth > 0) {
                $('#actions').show();
            }
        });
    </script>
</head>
    <body style="padding: 0; margin: 0;">
        <div>
            Depth:
            <span id="depth"></span>
            <input type="button" value="Add" onclick="window.location.href = '?' + (depth + 1).toString();" />
        </div>
        <div id="actions" style=" display: none;padding: 0; margin: 0;">
            <input type="button" value="Close FancyBox" onclick="parent.$.fancybox.close();"/>
            <input type="button" value="Rewind History, before closing FancyBox" onclick="history.go(-depth); parent.$.fancybox.close();"/>
            <input type="button" value="Back" onclick="window.history.back();" />
            <div>Bad behavior:
                <ul>
                    <li>Simply closing FancyBox allows the afterClose handler to run. The problem is that when depth > 0, the iFrame's history is kept, breaking correct functionality of the browser's back button.</li>
                    <li>Rewinding history back to 0 depth kills FancyBox, preventing the afterClose handler from firing. You can see this step-by-step by clicking the back button.</li>
                </ul>
            </div>
        </div>
    </body>
</html>

FancyBox iFrame在历史回归时关闭

0 个答案: