サイト制作に関するメモ書き

HOME > JavaScript > jQuery > Google Chromeでローカル環境でのiframe操作ができない

Google Chromeでローカル環境でのiframe操作ができない

ローカル環境で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());
	});
});

サーバーにアップした状態だと問題なく動作しました。

デモページ
 

【参考サイト】

 

“Google Chromeでローカル環境でのiframe操作ができない” への2件のフィードバック

  1. nshuhei より:

    私も同様の経験をしました。なんか、escape する方法はないんですかね。

    Movable Type でブログの原稿を作るときに。
    Youtube をページ内で再生させることをしていました。
    結局、IE に逃げましたが、chrome の方が操作はし易いのです。

    • cly7796.net より:

      nshuheiさん
      コメントありがとうございます。

      Movable Typeは使ったことがないのでちょっと分からないのですが、
      記事に書いているサンプルの場合、iframeでの読み込み先もローカルなので
      Apacheサーバで実行すれば、一応chromeでもiframeの操作が行えます。

      もしくはnshuheiさんが仰られているように、IEやFirefoxなどの
      別ブラウザで確認するしかないのかなと思います。

nshuhei にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP