常連

**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で表示されない

**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)

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

vbaとseleniumを使ってedge の自動化を行おうとしております。
iframeで開かれるページのElement取得がうまくいきません。

対象ページは下記のような構成になっており、①②③Elementを操作したいのですが、
「実行時エラー'7' 
NoSuchElementError
Element not found for Css=#SyozokuCode」と表示されます。-④
iframeを切り替える必要があると思うのですが、いろいろ試しましたが、idが指定されていないiframeへの切り替え方がわかりません。方法を教えていただけないでしょうか。


```html
<iframe class="ui-helper-hidden" name="XW_BEAT" src "../x/lib/blankhtm" momo="･･･" cd_frame_id_="･･･">...
</iframe>
    ・
    ・
<iframe src "javascript:'' tabindex>
    ・
    ・
①  <button id="output" clas="･･･">...</button>
    ・
    ・
②  <input class="txt SyozokuCode ･･･" id="SyozokuCode" size="･･･" title="･･･" type="text" maxlength="･･･" style="･･･">
③  <input type="checkbox id="chkKaiSyozoku" class="chkKaiSyozoku">
    ・
    ・
</iframe>
```
以下、試したコードです。
```vba
    Dim driver As New Selenium.WebDriver
    driver.Start "edge"
    driver.Window.Maximize
    driver.Get "http://･･･top.htm"

    ' ログイン
    driver.FindElementById("XW_LOGIN_USER").SendKeys "･･･"
    driver.FindElementById("XW_LOGIN_PW").SendKeys "･･･"
    driver.FindElementById("XW_LOGIN").Click
    Sleep 3000
    
    ' 月次処理
    driver.FindElementByCss("#xw35").Click
    Sleep 3000
    
    ' 月次社員一覧
    driver.FindElementByCss("#XW_TABS > ul > li:nth-child(4)").Click
    ' Frameの切り替え　これが動かないので以降の FindElementBy が Not Found になる!?
    driver.SwitchToFrame driver.FindElementByTag("iframe")
    ' 所属を入力　ここで上記エラーが発生
④  driver.FindElementByCss("#SyozokuCode").SendKeys "109"

```