带有 iframe 的颜色框 - 关闭然后打开另一个答案

【问题标题】：Colorbox with iframe - closing then opening another one带有 iframe 的颜色框 - 关闭然后打开另一个
【发布时间】：2012-03-14 19:21:40
【问题描述】：

我有一个在 iframe 中打开的颜色框窗口。在该窗口内，我有一个用户可以单击的链接，理想情况下，我希望关闭当前的颜色框窗口并打开一个新的颜色框窗口（再次在 iframe 中）或将新内容加载到现有 iframe 中。

我的第一个窗口是这样打开的：

$.colorbox({ width: "800px", height: "580px", open: true, iframe: true, href: '/App/View?id=' + id });

当我点击第一个窗口中的链接时，会触发以下内容：

$.colorbox({ width: "800px", height: "580px", iframe: true, href: "/App/Note?nodeId=" + nodeId })

我尝试关闭第一个窗口：

parent.$.colorbox.close();

但这最终会关闭两个窗口。

如果我不尝试关闭第二个窗口，则会在第一个窗口的内容中打开，并且我有 2 个边框、2 个关闭按钮等。

有什么想法吗？

谢谢。

【问题讨论】：

标签： jquery iframe colorbox

【解决方案1】：

尝试执行此操作，这将关闭第一个颜色框，然后打开带有父上下文的新颜色框。

parent.$.colorbox.close(); 
parent.$.colorbox({ width: "800px", height: "580px", iframe: true, href: "/App/Note?nodeId=" + nodeId });

实际上你应该在父页面中有一个函数可以做到这一点。

function OpenNote(noteId){
   $.colorbox.close(); 
   $.colorbox({ width: "800px", height: "580px", iframe: true, href: "/App/Note?nodeId=" + nodeId });
}

然后通过点击查看页面内的链接调用此函数并传递noteId。

parent.OpenNote(id);

【讨论】：

【解决方案2】：

当关闭一个颜色框时，我使用递归函数打开另一个颜色框。我的函数是：

<script type="text/javascript">
    var colorList = [];
                    colorList.push('1. Popup Content');
                    colorList.push('2. Popup Content');
                    colorList.push('3. Popup Content');
                    colorList.push('4. Popup Content');
            colorboxRecursive(colorList);
    function colorboxRecursive(colorList){
        if (colorList.length>0) {
            $.colorbox({
                html:colorList.pop(),
                onClosed:function(){
                    if (colorList.length>0)
                        colorboxRecursive(colorList);
                }
            });
        }else{
            return false;
        }
    }
</script>

【讨论】：