常連

iframeで別ドメインの動画を埋め込み、画面上を上にフリックしたら動画が消える操作を実装したいと思い、iframeのbodyかdiv要素にtouchmoveイベントをつけて発火させようと思ったのですがiframeの要素の取得は同一生成元ポリシーによってできないと言われました。
どうしても画面上をフリックしてのイベント発火を実装したいのですが、他になにかしらのやり方をご存知の方がいましたらご教授していただけると幸いです。

動画はニコニコ動画からの埋め込みです。

### 該当のソースコード
```html
<!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>
```
```js
       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をつけて、それをタッチして操作というのは実装できたのですが、やはり画面上をタッチしての操作を実装したいです。

他にも動画の手前に透明度を０にした要素を覆うように配置して操作というのも考えたのですがそうすると動画を再生したりする操作ができなくなってしまいます。

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

### 実現したいこと

iframe内にドラッグした際に、ドラッグ＆ドロップAPIでドロップ出来ないようにしたい
### 前提

・PHPでアップローダーを作っていまして、商品ごとに違うテーブルをiframe内に読み込んでいる
・ドラッグ＆ドロップAPIでWindow全体をドロップ禁止にしており、スクロールバーも含めてドラッグしても禁止マークが付いたマウスカーソルになっている
・ファイルを受け付ける領域のみ、ドラッグ＆ドロップAPIでドラッグとドロップを許可しているので、ここではコピーという文字のついたカーソルになっている
・iframeの領域にもドラッグ＆ドロップAPIでドロップ禁止を設定している

### 発生している問題

iframe内にドラッグしてみるとAPIが効かなくて、コピーのついたカーソルになりドロップするとダウロ－ドウィンドウが別タブで開いてしまう

### 該当のソースコード
iframe_test.html
CODE Pen   [iframe_test.html](https://codepen.io/nekora/pen/LYMaMPB)

electronics.html
CODE Pen   [electronics.html](https://codepen.io/nekora/pen/qBLvLOy) 

### 試したこと

読み込まれる側のHTMLにスクリプトで禁止してみましたが効果はありませんでした。

### 補足情報（FW/ツールのバージョンなど）

Windows10 64Bit Chrome最新版
尚、デスクトップ上に2つのファイルを置いて試すとクロスオリジンのエラーが出るので、諸先輩方には釈迦に説法でしょうが、ローカルサーバー等に上げて検証してみて下さい。

諸先輩方のお知恵を拝借できれば幸いです。m(_ _)m


iframe内でのドラッグ＆ドロップの禁止が出来ない

**HTMLでiframeを埋め込むと一部のサイトでは接続拒否されてしまう**
iframeでどこかのWebページのURLを指定しても一部のサイトは接続拒否となります。これは仕様なのか、バグなのかわかりませんが、以下のコードを試してみました。
このコードで指定したサイトの
```JavaScript
function main() {
    var url = document.getElementById('url').value; //urlを指定
    document.getElementById('element').innerHTML = "<iframe width=1366  height=770  src="+url+" </iframe>"; //一部のサイトは接続できない
}
```
どうすれば接続拒否されないようになるのでしょうか。
回答よろしくおねがいします。

HTMLのiframeで接続拒否されないようにしたい

### 実現したいこと

iframeで埋め込んだGooglemapをiPhone(Safari)で画面幅いっぱいに表示したいです

### 発生している問題

Wordpressを用いてあるページにGooglemapをiframeで埋め込みました。スマホで画面幅いっぱいに埋め込んだマップを表示させようとしたのですが、実機（iPhone 12mini）で確認したところ下記画像のように左半分しか表示されません。右半分をタップしてみると反応しているので表示自体は画面幅いっぱいなのかもしれませんが見えません。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-13/163e1829-3b29-4287-8baf-1a3f3c191b21.jpeg)


### 該当のソースコード


```html
<div class="inner">
  <div class="map">
    <iframe src="googlemapの埋め込み用url"  style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  </div>
</div>
```

```css
.inner {
width: min(80%, 1200px);
}

.map {
width: 100vw;
height: 100vw; //画面幅いっぱいかつ正方形で表示するため
margin: 0 calc(50% - 50vw) 20px; //画面幅いっぱに表示するため
}

```

### 試したこと

CSSが問題なのかと思い、全て切って表示してみましたが変わらずでした。違うページで同じように画面幅いっぱいに表示した時には何も問題はなかったので原因がわかりません。
きちんと表示されているページと読み込んでいるjsファイルやプラグインなどに違いはありません。
wordpressを使用していますが、コード自体は直接phpファイルに記述しています。
どのようなことが原因として考えられるか教えていただければと思います。

また、初めて質問するので足りない情報などありましたら都度追加していきたいと思います。
どうぞよろしくお願いいたします。


iframeで埋め込んだGooglemapがsafariで半分しか表示されません。

iframeの画面サイズをブラウザいっぱいにしたいのですが
以下のコードを記述しましてもiframeの幅はブラウザいっぱいになるのですが、
高さがかなり短くなってしまいます。
どうすればよいのでしょうか。

<iframe src = "menu1.html" width = "100%" height = "100%"></iframe>

iframeのブラウザ全画面表示について

htmlのiframeで別のサイトを埋め込みたいのです。
---

```html
        <html lang="ja">
        <head>
          <meta charset="UTF-8">
          <style>
            html,body{
              height:100%;
            }
          </style>
          <title>SSK</title>
        </head>
        <body>
          <script type="text/javascript">
  document.write("<iframe src='https://www.google.co.jp/' width='800' height='800' frameborder='0' marginwidth='0' marginheight='0'></iframe>");
  </script>
        </body>
        </html>
```

**しかし、埋め込めるサイトと、埋め込めないサイトがあります。**

例えば、https://www.google.co.jp/は埋め込めません。
ブラウザ(Safari)のコンソールには
> Refused to display 'https://www.google.co.jp/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

と出ます。

このX-Frame-Optionsの規制がかかっているサイトを自分のサイトに表示する方法はないでしょうか？
---

自分のサイトに他のサイトを埋め込みたい

Reactの学習をしており、コンポネントを作成したのですが想定どおりの動きをさせるために何をすれば良いのかアドバイスいただければと存じます。

#### 想定している動き
下記のようなページで、左側の「rakuten」や「amazon」の文字列をhoverしたときに、
右側のiframe内にそれぞれのwebサイトが表示されるようにしたいです。

![画面イメージ](4967e77bd8708d181ebced315cfa1e3d.png)


#### 下記のようにコードを書いてみましたが、、
`Expected an assignment or function call and instead saw an expression  no-unused-expressions`
というエラーになってしまいます。
```React
import React from 'react';
import './menu.scss'

const CONTENTS_JSON = `[
    {
        "id": 1,
        "title": "amazon",
        "content":"https://www.amazon.co.jp/"
    },
    {
        "id": 2,
        "title": "rakuten",
        "content": "https://www.rakuten.co.jp/"
    },
]`;

const ShowCase = ({title, content, isOpen, onMouseOver}) => (
    <div onMouseOver={onMouseOver}>
        <p>{title}</p>
        {isOpen && <iframe class='showcase' title={title} src={content}></iframe>}
    </div>
)


class MenuNew extends React.Component {
    constructor(props){
        super(props);
        this.contents = JSON.parse(CONTENTS_JSON);
        // idを配列で持てるようにする
        this.state = {
            openIds: []
        }
        this.mouseOver = this.mouseOver.bind(this);
    }
    mouseOver(id){
        // 分割代入
        let {openIds} = this.state;
        openIds = openIds.includes(id) ? openIds.filter(e => e !== id) : [...openIds, id];
        this.setState({ openIds });
    }
    render(){
        return(
            <div className='main'>
                <div>
                    {this.contents.map(q => {
                        <ShowCase
                            key={q.id}
                            title={q.title}
                            content={q.content}
                            onMouseOver={() => {this.mouseOver(q.id)}}
                            isOpen={this.state.openIds.includes(q.id)}
                        />
                    })}
                </div>
            </div>
        );
    }
}

export default MenuNew;
```
想定している動きを実現させるためにはどのような方法がありますでしょうか？
アドバイスいただけますと嬉しいです。

#### → 想定した動きを実現できました
新しいコンポネントを作り直してしまったので、上記のコードと大分変わってしまいましたが、
「文字列をhoverしたときに、iframe内にそれぞれのwebサイトが表示されるように」できました。
また、jsonファイルはsrc配下に別ファイルとして持たせています。
```React
import React from 'react';
import data from './sample.json';

const Show = ({ title, url, isOpen, onMouseOver }) => (
  <div>
      <p onMouseOver={onMouseOver}>{title}</p>
      {isOpen && <iframe src={url}/>}
  </div>
);

class App extends React.Component {
  constructor(props){
    super(props);
    this.json = data;
      this.state={
        openIds: []
      }
      this.handleChange = this.handleChange.bind(this);
  }
  handleChange(id){
    let { openIds } = this.state;
    openIds = openIds.includes(id) ? openIds.filter(e => e !== id) : [...openIds, id];
    this.setState({ openIds });
  }
  render(){
    return(
      <div>
        {this.json.map(q => (
          <Show
            key={q.id}
            title={q.title}
            url={q.url}
            isOpen={this.state.openIds.includes(q.id)}
            onMouseOver={() => { this.handleChange(q.id); }}
          />
        ))}
      </div>
    )
  }
}
export default App;
```

```json
[
    {
        "id": "1",
        "title": "Green RGBA model",
        "url": "http://www.flatuicolorpicker.com/green-rgba-color-model"
    },
    {
        "id": "2",
        "title": "HTML color code",
        "url": "https://html-color-codes.info/japanese/"

    }

]
```

出力はこんな感じです。
![イメージ説明](00215bc6435566ab18666078b672e839.png)

Reactでiframeを使いたい（解決済み　成功コード追記）

GoogleカレンダーをWEBサイトに張り付けたのですがMicrosoft　IE、Edgeで表示されません。
それぞれ以下のメッセージが出ます。
どうしたら表示されるようになりますか？
Googlechrome、Firefoxでは問題なく表示されます。

### IE
「このコンテンツはフレーム内で表示できません

### Edge
この Web サイトに入力する情報のセキュリティを保護するため、このコンテンツの発行者はフレーム内での表示を許可していません。」
 
「accounts.google.com により、接続が拒否されました。」