2017-02-02 2 views
0

iframe内に存在するボタンを使用してiframeを閉じたいとします。私はボタンをクリックするとそのiframe内からiframe要素にアクセスするにはどうすればよいですか?

<!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> 

、私が手

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:

私は、index.htmlをとcontents.htmlこれら2つのファイルを持っていますコンソールのエラー "nullのプロパティ 'スタイル'を読み取ることができません。私は、iframeを取得しようとする試みが成功しなかったことを意味理解しています。それにスタイルを付ける?

答えて

1

親ウィンドウまで移動する必要があります。 IFRAMEが

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

DEMO

+0

ああを試してみて、それ自身のウィンドウ

あり、大丈夫、私は参照してください。すべての道を出て行き、戻ってください。理にかなっています。助けてくれてありがとう – redeagle47

関連する問題