iframeのエリアをクリックしたかを判定するには？

ユーチューブの埋め込みやアドセンス等をクリックしたかどうかを判定したいのですが、どうやってもうまくいきません。

HTML
1<div id="tube" onclick="hantei()">
2<iframe src="https://www.youtube.com/embed/abcdefg></iframe>
3</div>
4
5<script>
6function hantei()
7{
8   alert("good!");
9}
10</script>

根本的にやり方を間違っているのかもしれませんが、どうやってもうまく行きませんでした。
よろしくお願い致します。

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

回答2件

ベストアンサー

実際にテストしてみましたら、
該当する箇所（YouTube）にクリックしたというポップアップを出す事が出来ましたので、
下記サイトが参考になりませんでしょうか？

jQueryでクロスサイトのiframe広告のクリックをカウントする方法

そんな悩みを解決するのが今回紹介する「iframeTracker jQuery Plugin」です。
このプラグインを使うとドメインの異なるクロスサイトのiframe内広告のクリックをカウントすることができます。

テストしたソースコードは下記になります。

<html>
<head>
<title>jQuery Plugin DEMO</title>

<script type="text/javascript" src="./1.11.3jquery.min.js"></script>
<script type="text/javascript" src="./jquery.iframetracker.js"></script>

<script>
jQuery(document).ready(function($){
    $('.iframe_wrap iframe').iframeTracker({
        blurCallback: function(){
            alert("iframe click!");
        }
    });
});
</script>

</head>
<body>

<div class="iframe_wrap">
<iframe src="https://www.youtube.com/embed/V8StotbkS_Q"></iframe>
</div>

</body>
</html>

「alert("iframe click!");」の部分を「alert("good!");」に変更したら、
お望みの判定になりませんか？

「1.11.3jquery.min.js」と「jquery.iframetracker.js」は、
「iframeTracker jQuery Pluginのページ」よりダウンロード願います。

詳しくは、参考サイトを参照して頂ければと思います。

投稿2018/09/06 08:35

hinako.20180906

総合スコア30

axs

2018/09/06 20:31

ありがとうございます！うまくいきました！ m(_ _)m

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

以下の記事の応用で質問者さんのやりたいことができませんか？

ModalPopup を別ページから非表示
http://surferonwww.info/BlogEngine/post/2013/01/27/hide-modalpopup-by-clicking-a-button-placed-in-another-page.aspx

上記の記事には ModalPopup とか質問に関係ないことがいろいろ書いてありますが、要するに以下のことを行っていますのでそこに注目してください。

(1) iframe 内の document オブジェクトを取得

(2) getElementById で iframe に表示された document のボタンを取得

(3) ボタンにイベントリスナをアタッチ

(4) イベントリスナでクリックイベントを捕捉して処置

記事にはそのためのコードも書いてあります。

投稿2018/09/01 01:49

退会済みユーザー

総合スコア0

kei344

2018/09/01 02:53

質問者が例示したURLであればクロスドメインの制限にかかりますよ。【JavaScript のクロスドメイン (Cross-Domain) 問題の回避と諸注意 – tsmatz】 https://tsmatz.wordpress.com/2011/06/24/jsonp-cross-domain/

退会済みユーザー

2018/09/01 05:35 編集

kei344 さん＞そうでした。iframe に表示するページは親ページと同じドメインのものでないと、上の回答で紹介した方法ではオブジェクトは取得できないですね。ご指摘ありがとうございました。質問者さん＞上に書いた通り、紹介した方法ではドメインが同じである必要があります。iframe に表示するのが YouTube ではその条件が満たせないでしょうから、上の方法は NG でした。すみません。

axs

2018/09/01 06:13

kei344さん、SurferOnWwwさんありがとうございます。

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

あなたの回答