iframe内からiframe外の親windowの要素を変更する方法 – How to change an element of parent window from iframe

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

iframe内から親要素を変更する場面は基本的にはありませんが。時に必要になる、ちょっとしたtipsだと思います。自分用メモとしてここに記しておきます。

デモコード

・以下、iframe内への記述になります。


<button>Change</button>


<script type="text/javascript">
$(function(){
$(‘button’).click(function(){
parent.$("#outframe").animate({‘margin-left’:’+=30px’},’fast’);
});
});
</script>

・以下、iframeの外への記述になります。
<p id="outframe">Outside Iframe</p>
<iframe src="http://example.com" frameborder="0" width="400px" height="400px"></iframe>

DEMO


以上です。