iframe孩子发送数据到父母和清除超时时间

Question

嗨来自各地的团队，

我最难倒在这个问题上。

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

基本上它是一种浮动功能，适用于群组通讯等。我希望能够在页面首次加载时切换源页面并使其可用。

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

我一直在为此工作2天，并且我要么在浮子不关闭的地方，要么浮子拒绝打开。

请帮忙。

非常感谢提前。

预览页：

<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" /> 

Answer 1

比

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

对父页代码ks，

我其实已经半封闭了。 这是我做到的。我在这里留下来让未来的人学习，并且有一个非常容易的时间。

允许未来的Web开发人员学习。

家长：

<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。 我会留下来让其他人可以找到它。

谢谢， 马修