Q&A
ご回答ありがとうございます！！
非常に簡単な原因な気がするのですが、初心者のためハマってしまっており、お助けいただけますと幸いです。。
チャットボット内の設問のクリックを計測したいのですが、そのチャット領域がiframeとなっています。
そのため、「親フレームから子フレームの動きを計測する」方法を調べていたところ、
https://s8a.jp/javascript-event-iframe
このような記事があり「解決！」と思ったのですが、ローカルで全く同じソースで試してみても、子フレーム内のマウスの動きが計測できません。。
全く同じソースですので、ローカルとWEBでの違いを考えると、jQueryを読み込む前にchild.htmlを読んでしまっていることが原因とも考えたのですが、
html
1<html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 4 <script> 5 document.addEventListener('DOMContentLoaded', function () { 6 // 親フレームのイベント 7 document.addEventListener('mousemove', onMouseMove); 8 9 // 子フレームのイベント 10 var iframeElements = document.getElementsByTagName('iframe'); 11 for (var i = 0; i < iframeElements.length; i++) { 12 iframeElements[i].addEventListener('load', (function (element) { 13 return function () { 14 element.contentWindow.document.addEventListener('mousemove', onMouseMove); 15 }; 16 })(iframeElements[i]), false); 17 } 18 19 function onMouseMove() { 20 console.log('マウス動いた！'); 21 } 22 }, false); 23 </script> 24 </head> 25 <body> 26 <main> 27 <p>親フレームです。</p> 28 <iframe src="child.html"></iframe> 29 </main> 30 </body> 31</html>
のように、jQueryを使わない書き方でも、子フレーム内のマウスの動きが計測できない状況です。
http://bl.ocks.org/n0f/raw/79c84cbb0fceb17296ae7a5992fb34fd/
こちらの例では問題なく動いているのですが、全く同じソースなので、なぜローカルだと動かないのかがどうしても分からず。。。
物凄く簡単な理由な気がするのですが、ご教示を頂けますと幸いです。
回答2件
0
ベストアンサー
ローカルで全く同じソースで試してみても
ローカルだから動かない状況かもしれません。file://でアクセスするローカルファイルは、ファイルごとに別オリジンとみなされるため、フレーム外から直接フレーム内へアクセスすることができません。
投稿2020/11/16 04:15
総合スコア146018
0
（子）フレーム側のソースにjsを記載すればよいのでは？
投稿2020/11/16 04:19
総合スコア116724
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/16 04:20
2020/11/16 06:34