質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

14627閲覧

クロスドメインのiframe内の要素を取得したい

hakoburanko

総合スコア4

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2019/11/03 07:59

編集2019/11/04 02:20

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をつけて、それをタッチして操作というのは実装できたのですが、やはり画面上をタッチしての操作を実装したいです。

他にも動画の手前に透明度を0にした要素を覆うように配置して操作というのも考えたのですがそうすると動画を再生したりする操作ができなくなってしまいます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/11/03 20:24 編集

「iframe内 要素 イベント」で調べて出てくる情報では何が足りませんか? いずれにしてもどういう構造のHTMLになっているかにもよるので、自身が調べたこと試したことを記載してください。
hakoburanko

2019/11/04 01:57 編集

すみません。ソースコードを記載しました 一通り調べては見たのですがiframe内要素の取得は同じドメイン内でないとできないみたいでして、書いてあったのはだいたい同ドメインでの操作方法でした。 他の代替案、もしくはクロスドメインのiframe内要素の取得方法がありましたら教えていただきたいです。
think49

2019/11/04 02:31

エラーメッセージで検索すれば、CORSについてもHITするようですが…。回答はしました。
guest

回答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
think49

総合スコア18172

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hakoburanko

2019/11/04 02:42

回答ありがとうございます 管理下にはないサーバーで依頼もできない場合は打つ手なしってことですよね…。
think49

2019/11/04 02:54

依頼できないというのは、管理者の連絡先がないのですか。
hakoburanko

2019/11/04 03:06

取得先がyoutubeやニコニコ動画などの動画配信サイトなのですが、そういったところでも依頼を出せば許可を出してくれるものなのでしょうか?
think49

2019/11/04 03:11 編集

「依頼を受けるに値するメリット/交換条件」などの交渉材料を相手に掲示できれば、可能性はあると思います。 後は「どうしても実装したい事情」を説明する以外に手はないでしょう。
hakoburanko

2019/11/04 03:55

なるほど、一旦そちらの方向でも試してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問