Как получить доступ к элементу iframe из этого iframe?

Я хотел бы закрыть iframe с помощью кнопки, которая существует внутри этого iframe.Как получить доступ к элементу iframe из этого iframe?

У меня есть эти два файла, index.html и contents.html:

index.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title></title> 
<style media="screen"> 
    a { 
    postion: relative; 
    top: 100px; 
    left: 100px; 
    } 
</style> 
    </head> 
    <body> 
<iframe id="outerIframe" src="./contents.html" width="1000px" height="1000px"></iframe> 
<div class="behind"> 
    <a href="http://www.google.com">Mark Behind</a> 
</div> 
</body> 
</html>

contents.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title></title> 

<style media="screen"> 
    .big-box { 
    height: 500px; 
    width: 500px; 
    background-color: #666; 
    } 
</style> 
</head> 


<body> 
<div class="big-box"> 
    <button class="closer" type="button" name="button">Click to close</button> 
</div> 


<script type="text/javascript"> 
    var button = document.querySelector('.closer'); 
    button.addEventListener('click', function() { 
    document.getElementById('outerIframe').style.display = "none"; 
    }); 
</script> 
</body> 
</html>

Когда я нажимаю кнопку, я получаю ошибка в консоли, в которой говорится: «Невозможно прочитать свойство« стиль »null. Я понимаю, что это означает, что моя попытка получить iframe не была успешной. Как я могу получить iframe на этой кнопке, чтобы я мог cha nge стилей на нем?

источник

2017-02-02 redeagle47

Необходимо пройти по родительскому окну. IFrame имеет собственные окна

Попробуйте

button.addEventListener('click', function() { 
    window.parent.document.getElementById('outerIframe').style.display = "none"; 
});

DEMO

источник

2017-02-02 21:59:45 charlietfl

О, хорошо, я вижу. Пройдите весь путь, а затем снова. Он имеет смысл. Спасибо за помощь – redeagle47

Как получить доступ к элементу iframe из этого iframe?

ответ

Смежные вопросы