iframe 子级向父级发送数据并清除超时答案

【问题标题】：Iframe child sending data to parent and clearingtimeoutiframe 子级向父级发送数据并清除超时
【发布时间】：2015-01-18 19:04:21
【问题描述】：

大家好，来自各地的团队，

在这个问题上我最难过。

我正在尝试使用颜色框通过 iframe 创建一个 url 的弹出窗口。（请不要说我拥有的创意和来源是测试页面，而不是实际主题）。我希望 iframe 在 12 秒后关闭，除非有人在 iframe 内点击其中的图像。

基本上，它是用于群组通讯等内容的浮动广告。我希望能够只切换源页面并在页面首次加载时使其可用。

因此，页面加载，启动 iframe 浮动，在 (x) 秒后关闭，除非有人点击 iframe 上的任何位置，此时他们必须点击关闭按钮。

我已经为此工作了 2 天，我要么将它放在浮子根本没有关闭的地方，要么是浮子拒绝保持打开状态。

请帮忙。

提前非常感谢。

预览页面：

http://matthewsallansdesign.com/Scripps/TestPageSETUP.html

父页面上的代码：

<link rel="stylesheet" href="http://matthewsallansdesign.com/Scripps/images/colorbox.css">
<script src="http://matthewsallansdesign.com/Scripps/images/jquery.min.js"></script>
<script src="http://matthewsallansdesign.com/Scripps/images/jquery.colorbox-min.js"></script>
<script>
Var t;
window.onload =  $(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"95%", height:"95%", open:true, opacity:.2, overlayClose:false, escKey:false, closeButton:true, reposition:true});
});

</script><script>

window.onload =  $(document).bind('cbox_complete', function(){
t = setTimeout($.colorbox.close, 12000);
});

</script><script>
 $(".iframe").click(function(){
 alert("click");
 clearTimeout(t);
 };
 </script>

<a class='iframe' href="http://matthewsallansdesign.com/Scripps/testPageA.html"></a>

子页面上的代码：

<script type="text/javascript">
$('body').click(function(){
    parent.postMessage('alert','moooo');
});
</script>

<img src="http://matthewsallansdesign.com/imgCreativeContent/imgExpanded/creative/grassSet3.png" />

【问题讨论】：

标签： javascript jquery iframe settimeout colorbox

【解决方案1】：

谢谢，

实际上我之前是半接近的。这是我的做法。我把它留在这里，让未来的人们学习并度过一段轻松的时光。

让未来的网络开发者学习。

家长：

<link rel="stylesheet" href="http://matthewsallansdesign.com/Scripps/images/colorbox.css">
<script src="http://matthewsallansdesign.com/Scripps/images/jquery.min.js"></script>
<script src="http://matthewsallansdesign.com/Scripps/images/jquery.colorbox-min.js"></script>

<script>
var t;

var iframeHost = "http://matthewsallansdesign.com"

if(typeof window.postMessage != 'undefined'){
var iframeListener = function (event) {
console.log(event);
        if(iframeHost == event.origin){
clearTimeout(t);
        }
    }      
if (window.addEventListener) {
      addEventListener("message", iframeListener, false);
    }       
else {
      attachEvent("onmessage", iframeListener);
    }
}


window.onload =  $(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"95%", height:"95%", open:true, opacity:.2, overlayClose:false, escKey:false, closeButton:true, reposition:true});
});

window.onload =  $(document).bind('cbox_complete', function(){
t = setTimeout($.colorbox.close, 6000);
});

</script>

<a class='iframe' href="http://matthewsallansdesign.com/Scripps/testPageA.html"></a>

孩子：

<script type="text/javascript">
$('body').click(function(){
parent.postMessage("HAMPSTERS",'*');
});
</script>

<img src="http://matthewsallansdesign.com/imgCreativeContent/imgExpanded/creative/grassSet3.png">

任何人真正需要做的唯一一件事就是替换上面的网址。

我建议大家在自己的服务器上下载 js 和 css。我会保留它，以便其他人可以找到它。

谢谢，马修

【讨论】：