如何关闭 iframe 中的颜色框？答案

【问题标题】：how to close colorbox within iframe?如何关闭 iframe 中的颜色框？
【发布时间】：2010-01-20 11:38:21
【问题描述】：

我有一个页面 manageGroup.php，用户也可以在其中添加成员到组。我使用颜色框来显示 addGroupMember.php。现在我需要在提交表单后关闭该颜色框。

我在 manageGroup.php 中使用的javascript

<script language="javascript" type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/dropdown.js"></script>
<script type="text/javascript" src="js/jquery.colorbox.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 $(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
 });
</script>

我用来打开颜色框的链接

<a class="iframe" href="addGMember.php?id=<?php echo base64_encode($fetch->g_id)?>">Add Member</a>

addGroupMember.php 中的代码是这样的：-

if($_POST['add']=="Go")
{
  $gid = $_POST['id'];
  $ii=0;
  $insert = "INSERT INTO ".DBGMEMBER." (gm_g_id,gm_m_id) VALUES ";
  foreach($_POST['gMember'] as $gMember)
  {
    if($ii==0)
    {
        $insert .= " ('".$gid."' , '".$gMember."')";
    }
    else
    {
        $insert .= " ,('".$gid."' , '".$gMember."')";   
    }
    $ii++;
  }
  $db->execute($insert);// after this i want to close the colorbox
  echo "<script>parent.$.fn.colorbox.close(); </script>";// code i used, but not working
}

【问题讨论】：

如果它仍然不起作用，您可以使用 <script>$(document).ready(function(){parent.$.fn.colorbox.close()});</script> 之类的东西，它应该可以完成这项工作。

标签： jquery colorbox

【解决方案1】：

这个对我来说很完美，应该适合你


parent.jQuery.colorbox.close()

【讨论】：

为了省略 $ 的一些麻烦，我建议使用 parent.jQuery.colorbox.close();
完美运行！谢谢。我尝试了 iframe jQuery('#cboxClose').click();和 jQuery(window).colorbox.close();但没有奏效。你的代码很棒。

【解决方案2】：

我帮我搞定了，有点疯狂，反正你也可以试一试。

假设您在 iframe 中的页面为 x.php，格式为 xyz

<?php
  if($_post['submit']=='Submit')
  {
    //some php code here
    if(success)
     echo "<script>parent.$.fn.colorbox.close(); </script>";
    else
    {
      //some error handling here;
    }
  }
?>
<form name='xyz' action='x.php'>
 //some html code here
 <input type='Submit' name='submit' />
</form>

【讨论】：

【解决方案3】：

首先：详细说明您的问题。您提供的信息有些简陋。没有人可以掌握你正在做的事情。还包括更多示例代码。

我唯一能猜到的是你试图触发它的编写方式。您添加到 $.fn 对象的所有内容都绑定到所有 jQuery 对象。

// doesn't work
$.fn.colorbox.close()
// proper way
$('idOfDomElement').colorbox.close()

..弗雷德里克

【讨论】：

您好，弗雷德里克，我已经发布了对我的问题的详细描述。但我不明白你使用 $('idOfDomElement').colorbox.close() 的意义。
能否请您在打开颜色框的位置添加 javascript 代码？
应该类似于： $(".iframe").colorbox.close();或 parent.$(".iframe").colorbox.close();

【解决方案4】：

就这个

parent.$.colorbox.close()

似乎对我有用！

我就这样使用它，甚至没有引用加载到 iframe 中的文件中的任何 JS。

  <a href="javascript:parent.$.colorbox.close()">close</a>

在一个空白的 HTML 文件中单独这样做似乎可以工作。

【讨论】：

【解决方案5】：

确保页面在 iFrame 中加载。不需要所有对 colorbox js、jQuery js 的必要引用。

然后父关闭调用将起作用：

parent.$('.yourElement').colorbox.close();

【讨论】：

其实，我只是在空白页上使用并且成功了！没有标题，没有其他标签，除了函数什么都没有。使用 Chrome 浏览器，不知道是 IE 还是 FF。
parent.$('#colorbox') 选择正确（在萤火虫中验证），但你不会走得更远。 parent.$.fn.color.close() 它是。（我想知道 colorbox 是否真的在所有场景中都是 100% 单例的，无论如何它都有效......）

【解决方案6】：

我认为问题在于颜色框属于父级，而不是 iframe 中的 DOM。

我的猜测是你需要调用 parent.[获取元素或 $.fn 对象的方式].colorbox.close() 或者你需要向父文档添加一个函数并调用 parent.myCloseFunction ()

【讨论】：

【解决方案7】：

我只是尝试从 iframe 中关闭颜色框，但无法使其正常工作。我使用了 $('#closebox').colorbox.close() 并且没有任何运气。

【讨论】：

【解决方案8】：

实际上我使用了一个简单的解决方案。

我把这个 <a id="btnDone" href="#">here</a> 内部代码，或者您可以使用提交按钮的 id 和

 $(document).ready(function () {
        $("#btnDone").click(function () {
            window.parent.location = "../siparisler/listele.aspx"
        });
 }

这样你可以重定向父页面。并且颜色框会自动关闭。如果您不需要重定向，只需为 window.parent.location 输入“#”

【讨论】：

【解决方案9】：

我没有设法通过建议的解决方案关闭 Colorbox。我得到父母未定义...所以..

我发现采取了不同的方法：

Home document: (iframe: false) 这将在同一个文档中的 DIV 中打开 ajax_page

$(document).ready(function(){
    $("#modalwindow").colorbox({
        width:"800px",
        height:"510px",
        iframe:false,
        href:"../ajax_page.php",
    });
});

在 ajax_page 中

$('#modalwindow').colorbox.close();

希望对你有帮助

【讨论】：