常連

**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の画面サイズをブラウザいっぱいにしたいのですが
以下のコードを記述しましても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の規制がかかっているサイトを自分のサイトに表示する方法はないでしょうか？
---

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

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内の要素を取得したい

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

GoogleカレンダーがマイクロソフトIE、Edgeで表示されない

### 実現したいこと
HTMLだけでフォームに入力されたIDをIframeのsrcに代入する方法を教えてください

### 発生している問題・分からないこと
・formに入力されたIDをifarmeのsrcに代入できない
-接続が拒否される




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

```Html
<HTML lang="ja-JP">
	<head>
		<meta charset="UTF-8"/>
		<title>Youtube player</title>
	</head>
	<body>
		<form action="" method="get" Class="form1">
			<div class="form1">
				<label for="text1">Youtubeの動画ID:</label>
				<input type="text" id="text1" name="text1"/>
			</div>
			<div class="form1">
				<input type="submit" value="Go!"/>
			</div>
		</form>
	<iframe src="https://www.youtube.com/watch?v="+text1/>
	</body>
</HTML>
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
mdn web docs等を見たりしてformには入力できるようになったがうまく代入されず接続が拒否される

### 補足
実行環境：chrome 125.0.6422.142
エディタ：Notepad++


HTMLだけでフォームに入力されたIDをIframeのsrcに代入する方法がわからない

**jQueryでページ内で読み込んだiframeの中身の要素に対していろいろな処理を行いたいのですが、**
**普通の書き方ではうまく動いてくれませんでした。**

やはりjQueryではiframe内の要素を編集することはできないのでしょうか？

jQueryでiframe内の要素にアクセスしたい！

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)