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

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

ただいまの
回答率

87.59%

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 6,404

score 4

iframeで別ドメインの動画を埋め込み、画面上を上にフリックしたら動画が消える操作を実装したいと思い、iframeのbodyかdiv要素にtouchmoveイベントをつけて発火させようと思ったのですがiframeの要素の取得は同一生成元ポリシーによってできないと言われました。
どうしても画面上をフリックしてのイベント発火を実装したいのですが、他になにかしらのやり方をご存知の方がいましたらご教授していただけると幸いです。

動画はニコニコ動画からの埋め込みです。

該当のソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>testiframe</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src=".live/iframe.js"></script>
    <link rel="stylesheet" href=".live/style.css" />
    </head>
    <style>
      main{
        margin-top:100px;
      }
      .container{
        width:90%;
        margin:0 auto;
      }
      .iframe_wrap{
        position:relative;
        width:100%;
        padding-bottom:56.25%;
      }
      .iframe_wrap iframe{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        text-align:center;
      }
    </style>
    <body>
      <main>
         <div class="container">
           <div class="iframe-wrap">
             <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>
           </div>
         </div>
        </main>
    </body>
</html>
       jQuery(function($){

         $(window).on('load',function(e){
           //iframe内要素の取得
           let iframe = $('.iframe-wrap').children('iframe')[0].contentWindow.find('div');

           iframe.on("touchmove",function(e){
             //処理
           })
         });
       });

エラー

Uncaught DOMException: Blocked a frame with origin "http://localhost" from accessing a cross-origin frame.

問題点

上のエラーのようにクロスドメインのiframeの要素は取得できないと言われ、調べた限りではクロスオリジンに関してはどうやっても解決できそうになかったです。

試したこと

動画の直上にboxをつけて、それをタッチして操作というのは実装できたのですが、やはり画面上をタッチしての操作を実装したいです。

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/11/04 05:24 編集

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

    キャンセル

  • hakoburanko

    2019/11/04 10:55 編集

    すみません。ソースコードを記載しました

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

    キャンセル

  • think49

    2019/11/04 11:31

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

    キャンセル

回答 1

+2

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 12:06

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

    キャンセル

  • 2019/11/04 12:09 編集

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

    キャンセル

  • 2019/11/04 12:55

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

    キャンセル

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

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

閲覧数の多いjQueryの質問