ローカル環境でiframeの操作をテストしていた時に、Google Chromeでだけ操作ができなかったのでメモ。
バグや不具合というか、Google Chromeの仕様みたいです。
サンプルコード
HTML(親ページ)
<div id="oya"> <input type="text" /><button>実行</button> <div id="oya-result">結果がここに反映されます。</div> </div> <iframe id="child-frame" src="child.html"></iframe>
HTML(子ページ)
<div id="ko"> <p>子</p> <input type="text" id="" /><button>実行</button> <div id="ko-result">結果がここに反映されます。</div> </div>
JavaScript(親ページ)
$(function() {
$(document).on('click', '#oya button', function() {
$('#child-frame').contents().find('#ko-result').text($('#oya input').val());
});
});
JavaScript(子ページ)
$(function() {
$(document).on('click', '#ko button', function() {
$('#oya-result' ,parent.document).text($('#ko input').val());
});
});
サーバーにアップした状態だと問題なく動作しました。
【参考サイト】
私も同様の経験をしました。なんか、escape する方法はないんですかね。
Movable Type でブログの原稿を作るときに。
Youtube をページ内で再生させることをしていました。
結局、IE に逃げましたが、chrome の方が操作はし易いのです。
nshuheiさん
コメントありがとうございます。
Movable Typeは使ったことがないのでちょっと分からないのですが、
記事に書いているサンプルの場合、iframeでの読み込み先もローカルなので
Apacheサーバで実行すれば、一応chromeでもiframeの操作が行えます。
もしくはnshuheiさんが仰られているように、IEやFirefoxなどの
別ブラウザで確認するしかないのかなと思います。