Question

来自各地的团队，

我对这个问题感到非常难过。

我正在尝试使用颜色框通过iframe创建一个网址弹出窗口。（请注意，我所拥有的创意和来源是测试页，而不是实际主题）。我希望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" />

Answer 1

谢谢，

我实际上是半封闭的。我就是这样做的。我要离开这里，以便将来的人们学习，并有一个非常轻松的时间。

允许未来的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。我会把它留下来让其他人找到它。

谢谢，马修

iframe子项将数据发送到parent和clearingtimeout

1 个答案: