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

Posted 2023-05-09

【中文标题】iframe 子级向父级发送数据并清除超时

【英文标题】：Iframe child sending data to parent and clearingtimeout

【发布时间】：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" />

【参考方案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。 我会保留它，以便其他人可以找到它。

谢谢， 马修