親フレームで子フレーム内のクリックイベントを取得したい

親ページでiframe内の要素をクリックした際に要素の情報を取得したい。

下記のように書いてみましたが、発火せず困っています。
ネット上にもいくつかありますが、どれもうまくいかず質問しました。

よろしくお願いいたします。

親ページ

<html>
<head>
<script type='text/javascript' src="js/jquery-2.1.4.min.js"></script>
<script>
//************************************************************************
//画像クリック
//************************************************************************
$(window).load(function() {
$("#phbox").contents().find(".img_set").on("click touchend", function(e) {
    e.preventDefault();
   alert($(this).data('no'));
});
});
</script>
</head>
<body>

<iframe src="hoge.html" width="100%" height='100%' frameborder="0" id="phbox"></iframe>
</body>
</html>

子(hoge.html)

<html>
<head>
<script type='text/javascript' src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
<div class='img_set' data-no='1'>ボタン</div>
<div class='img_set' data-no='2'>ボタン</div>
<div class='img_set' data-no='3'>ボタン</div>
<div class='img_set' data-no='4'>ボタン</div>
</body>
</html>

行動規範の内容に同意します

回答2件

ベストアンサー

Firefoxでなら問題なく発火します。Chromeでローカル（サーバに置かずに）で確認していませんか？
Chromeはローカルでは、iframeへのJavaScriptでのアクセスとかAjaxとかが出来ません。

【同一オリジンポリシー | MDN】
https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy#Cross-origin_network_access

【Chromeでローカルファイルをiframeで表示したときの注意 - ほげほげ（仮）】
https://starzero.hatenablog.com/entry/20100627/1278766055

投稿2019/01/17 16:40

編集2019/01/17 16:41

kei344

総合スコア69398

u-sukesan

2019/01/18 02:37

ありがとうございます。サーバー上でテストしています(T T) ちなみにchromeです。safari,firefoxでも動かなかったので凡ミスかもしれませんので、今一度コードを確認してみます。

kei344

2019/01/18 02:40

同一サーバですか？また、jqueryは読み込みできていますか？エラーは出ていませんか？デベロッパーツールで確認してみてください。 http://eng-entrance.com/javascript-display-error

u-sukesan

2019/01/18 02:43

そういえばクロスドメインでした・・そりゃ無理ですね

kei344

2019/01/18 02:47

子側も自由に作れるならpostMessageを使えば出来るとは思います。【[JavaScript] postMessageでクロスドメインメッセージ通信 - Qiita】 https://qiita.com/yasumodev/items/d339a875b4b9bf65d156

u-sukesan

2019/01/18 02:57

そんなものがあるんですね。子も親もどちらも自家製ですので、調べてチャレンジしてみます。ありがとうございました。

行動規範の内容に同意します

$('iframe').on('load', function () {});で囲ってみてください

jquery
1  $('iframe').on('load', function () {
2      $("#phbox").contents().find(".img_set").on("click touchend", function(e) {
3      e.preventDefault();
4      alert($(this).data('no'));
5      });
6   });

投稿2019/01/17 10:37