Q&A
「iframe内 要素 イベント」で調べて出てくる情報では何が足りませんか？
いずれにしてもどういう構造のHTMLになっているかにもよるので、自身が調べたこと試したことを記載してください。
iframeで別ドメインの動画を埋め込み、画面上を上にフリックしたら動画が消える操作を実装したいと思い、iframeのbodyかdiv要素にtouchmoveイベントをつけて発火させようと思ったのですがiframeの要素の取得は同一生成元ポリシーによってできないと言われました。
どうしても画面上をフリックしてのイベント発火を実装したいのですが、他になにかしらのやり方をご存知の方がいましたらご教授していただけると幸いです。
動画はニコニコ動画からの埋め込みです。
該当のソースコード
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>testiframe</title> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no"> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 8 <script src=".live/iframe.js"></script> 9 <link rel="stylesheet" href=".live/style.css" /> 10 </head> 11 <style> 12 main{ 13 margin-top:100px; 14 } 15 .container{ 16 width:90%; 17 margin:0 auto; 18 } 19 .iframe_wrap{ 20 position:relative; 21 width:100%; 22 padding-bottom:56.25%; 23 } 24 .iframe_wrap iframe{ 25 position:absolute; 26 top:0; 27 left:0; 28 width:100%; 29 height:100%; 30 text-align:center; 31 } 32 </style> 33 <body> 34 <main> 35 <div class="container"> 36 <div class="iframe-wrap"> 37 <script type="application/javascript" src="https://embed.nicovideo.jp/watch/sm35671493/script?w=640&h=360"></script><noscript><a href="https://www.nicovideo.jp/watch/sm35671493">TGS2019Day1 50分に渡る実機プレイPart1『デス・ストランディング DEATH STRANDING』</a></noscript> 38 </div> 39 </div> 40 </main> 41 </body> 42</html>
js
1 jQuery(function($){ 2 3 $(window).on('load',function(e){ 4 //iframe内要素の取得 5 let iframe = $('.iframe-wrap').children('iframe')[0].contentWindow.find('div'); 6 7 iframe.on("touchmove",function(e){ 8 //処理 9 }) 10 }); 11 });
エラー
Uncaught DOMException: Blocked a frame with origin "http://localhost" from accessing a cross-origin frame.
問題点
上のエラーのようにクロスドメインのiframeの要素は取得できないと言われ、調べた限りではクロスオリジンに関してはどうやっても解決できそうになかったです。
試したこと
動画の直上にboxをつけて、それをタッチして操作というのは実装できたのですが、やはり画面上をタッチしての操作を実装したいです。
他にも動画の手前に透明度を０にした要素を覆うように配置して操作というのも考えたのですがそうすると動画を再生したりする操作ができなくなってしまいます。
すみません。ソースコードを記載しました
一通り調べては見たのですがiframe内要素の取得は同じドメイン内でないとできないみたいでして、書いてあったのはだいたい同ドメインでの操作方法でした。
他の代替案、もしくはクロスドメインのiframe内要素の取得方法がありましたら教えていただきたいです。
エラーメッセージで検索すれば、CORSについてもHITするようですが…。回答はしました。
回答1件
0
Uncaught DOMException: Blocked a frame with origin "http://localhost" from accessing a cross-origin frame.
「iframe読み込み先サーバ」側で Access-Control-Allow-Origin ヘッダ値を「iframe読み込み元サイトのドメイン」に設定してください。
Access-Control-Allow-Origin: https://yoursite.example.com
iframe読み込み先サーバがあなたの管理下になければ、サーバ管理者に設定を依頼してください。
Re: hakoburanko さん
投稿2019/11/04 02:29
編集2019/11/04 02:57総合スコア18162
回答ありがとうございます
管理下にはないサーバーで依頼もできない場合は打つ手なしってことですよね…。
依頼できないというのは、管理者の連絡先がないのですか。
取得先がyoutubeやニコニコ動画などの動画配信サイトなのですが、そういったところでも依頼を出せば許可を出してくれるものなのでしょうか？
「依頼を受けるに値するメリット/交換条件」などの交渉材料を相手に掲示できれば、可能性はあると思います。
後は「どうしても実装したい事情」を説明する以外に手はないでしょう。
なるほど、一旦そちらの方向でも試してみます。
あなたの回答
tips
プレビュー
