提交后关闭Iframe

iframe close after submit

本文关键字:Iframe 提交      更新时间:2023-09-26

我有一个名为class="iframe"的弹出视图的链接。我计划在这些弹出框内设置一个表单,但我的问题是我需要在点击提交后关闭这些弹出框,然后我的原始页面,或者我的弹出背景会刷新它自己。我的脚本:

<script src="<?php echo base_url(); ?>template/popup/jquery.colorbox.js"></script>
<script type="text/javascript">
var $ = jQuery.noConflict();
    $(document).ready(function(){
        //Examples of how to assign the Colorbox event to elements
        $(".iframe").colorbox({iframe:true, width:"50%", height:"78%"});
        //Example of preserving a JavaScript event for inline calls.
        $("#click").click(function(){ 
            $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
            return false;
        });
    });
</script>
<a class='iframe' href="#">POP UP </a>

查看PostMessages

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

您应该能够从您的父页面调度消息。你的窗口应该能够关闭自己一旦它收到消息。(跨域也可以)

使用window.open打开弹出窗口,并将其保存为变量。这个变量将指向那个窗口对象。您可以稍后在这个变量上调用.close

var url = 'http://yourwebsite.com/subpage-within-your-website.html';
popup_window = window.open(url);
popup_window.close();

注意:由于Javascript对iframe的安全限制,这只会在属于同一域的页面上调用。我也写了一个jsFiddle,但它似乎有沙盒启用,阻止iframe访问。

此页有一个工作示例。源代码。