У меня есть два HTML. Один из них является родительским, а другой - iframe.html.
Я не получаю идентификатор iframe от child в файле iframe.html.
Показывает проблему перекрестного происхождения, а также реализует метод postmessage для перекрестного происхождения, но не решен.
Пожалуйста, предложите, как продолжить.
Это показано ниже ошибки
Uncaught DOMException: заблокирован фрейм с источником "https://tpc.googlesyndication.com" от доступа к фрейму перекрестного происхождения.
at findMyId (https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKC7yNXNVxABGAEyCLnNExVMQy5U:61:26)
на clickHandler (https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKC7yNXNVxABGAEyCLnNExVMQy5U:101:19)
на HTMLImageElement.onclick (https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKC7yNXNVxABGAEyCLnNExVMQy5U:88:104)
iframe.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<style>
img{cursor:pointer;}
img {position: absolute;}
#banner_300by600
{
height:600px;
width:300px;
margin:0px;
padding:0px;
position: relative;
right:0;
cursor:pointer;
}
#banner_1260by500
{
height:500px;
width:1260px;
margin:0px;
padding:0px;
position: relative;
right:0;
float: right;
cursor:pointer;
}
.banner_1260by500Img
{
height:500px;
width:1260px;
background: url(elephant_300x600.jpg) no-repeat;
margin:0px;
padding:0px;
position: relative;
right:0;
float: right;
cursor:pointer;
}
#btn_exp
{
top: 1px;
right: 1px;
}
#btn_clp
{
right: 1px;
top: 1px;
}
.closeBtnStyle{
position: relative;
top: -504px;
left: 1173px;
}
</style>
<script>
function findMyId() {
var iframes = parent.document.getElementsByTagName("iframe");
for (var i=0, len=iframes.length; i < len; ++i) {
if (document == iframes[i].contentDocument ||
self == iframes[i].contentWindow) {
return iframes[i].id;
}
}
return "";
}
</script>
</head>
<body>
<div id="banner_1260by500">
<a onClick="setclickurl();"><img src="%%FILE:JPG3%%" id="bigImage" style="position: absolute;"></a>
<img src="%%FILE:JPG4%%" id="btn_close" onClick="clickHandler()" style="position: absolute;right:0;">
</div>
<script>
function setclickurl()
{
window.open("%%CLICK_URL_ESC%%%%DEST_URL%%", "_blank");
}
var btnClose = document.getElementById("btn_close");
var closeBanner = document.getElementById("banner_1260by500");
var iframeA = window.parent.document.getElementById("pushdown_1");
function clickHandler() {
var iFrameId = findMyId();
//console.log(window.parent.document.getElementById("pushdown_1"));
///iframeA.contentWindow.postMessage('The message to send.', '*');
window.parent.postMessage('The message to send.', '*');
console.log("btnClose" + document.getElementById("banner_1260by500").parentElement.parentElement + ";;;;;" );
console.log("btnClose" + iFrameId);
parent.document.getElementById("pushdown_1").style.display = "none";
}
var messageEventHandlerB = function(event){
// check that the origin is one we want.
if(event.origin == '*') {
alert(event.data);
}
}
window.addEventListener('message', messageEventHandlerB,false);
</script>
</body>
</html>