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。 我會留下來讓其他人可以找到它。

謝謝， 馬修