常連

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を使いたい（解決済み　成功コード追記）

**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で接続拒否されないようにしたい

フォーム画面(index.html)でボタンを押して、次のページへ遷移させております。
そのページではiframeを使用しており、そのiframe内にはflaskで動作させた変数を使用しております。

### <症状>
iframe内の変数が表示されない。受け渡しがうまくいってない。

### <考えられる要因1>
次のページに変数を渡しており、iframe内のhtmlへは変数の受け渡しがうまくいっていないのでは。

### <考えられる要因2>
flaskでiframe操作する際、htmlのパスを通す方法がうまくいかず、同層のフォルダ内にhtmlを入れておらず、staticに入れている。

### <フォルダ構成>
- 第1層フォルダ内
・app.py
・staticフォルダ
・templatesフォルダ   
- templatesフォルダ
・index.html
・next_page.html
- staticフォルダ
・next_page2.html


### コードについて
```app.py
from flask import Flask, render_template, request, session, url_for, redirect, jsonify,g
from flask.views import MethodView
import sqlite3,pickle
import pandas as pd

app = Flask(__name__)

data_base="◎◎.db"
table_1="◎◎"

app = Flask(__name__)

def get_db():
    if 'db' not in g:
        g.db = sqlite3.connect(◎◎◎◎◎◎)
        return g.db
 
def close_db(e=None):
    db = g.pop('db', None)
 
    if db is not None:
        db.close()


#「/」へアクセスがあった場合
@app.route("/")
def hello():
    return render_template('index.html')

@app.route("/next_page", methods=['POST'])
def index():
    
    if request.method == 'POST':
        id2_ = request.form.get("user_id2")
        id_ = request.form.get('user_id')
        path_ = request.form.get('path1')
                
        mydata = []
        db = get_db()
        sql = "select * from " + id2_
        
        try:
            cur = db.execute(sql)
        except:
            return render_template('index.html')

        mydata = cur.fetchall()
        df=pd.read_sql(sql,g.db)
    
        return render_template('/next_page.html',\
            title1=id_, \
            title2=id2_, \
                col_1=df.columns, \
                num=mydata[0], \
            data=mydata)
    
    else:
        return render_template('index.html')
       
#app.pyをターミナルから直接呼び出した時だけ、app.run()を実行する
if __name__ == "__main__":
    app.run(debug=True)
```

### templatesフォルダ内のhtml
```idex.html
<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>データベース</title>
  <link rel="stylesheet" href="static/css/style.css">
</head>

<form action="/next_page" method="POST">
<table class="form-table">
    <tbody>
      <tr>
        <th>参照パス</th>
        <td><input required type="text" class="id1" name="path1" size="60" value="" list="example1" >
        </td>
	<datalist id="example1">
		<option value=""></option>
		<option value="サンプル2"></option>
		<option value="サンプル3"></option>
	</datalist>
      </tr>
      <tr>
        <th>データベース名</th>
        <td><input required type="text" class="id1" name="user_id" size="60" list="example2" value="" placeholder="product1.db">
        </td>
	<datalist id="example2">
		<option value="サンプル1"></option>
		<option value="サンプル2"></option>
		<option value="サンプル3"></option>
	</datalist>
      </tr>
      <tr>
        <th>テーブル名</th>
        <td><input required type="text" class="id2" name="user_id2" size="60" value="" list="example3" placeholder="product10">
        </td>
	<datalist id="example3">
		<option value="サンプル4"></option>
		<option value="サンプル5"></option>
		<option value="サンプル6"></option>
	</datalist>

      </tr>
    </tbody>
  </table>

  <div class="example">
    <input type="submit" value="決定" class="submit1">
  </div>  
</form>
```
```next_page.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>データベース</title>

  </head>
  <body>
    <p>元の画面</p>
    <iframe src="{{ url_for('static', filename='next_page2.html') }}" width=100%; height=600px;></iframe>
  </body>
</html>
```
### staticフォルダ内のhtml (iframe内のファイル)
```next_page2.html
<!DOCTYPE html><html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">


<link rel="stylesheet" href="static/css/style_next.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/jquery.resizableColumns.css') }}" />


</head></html>

<body> 

<div class="site-header">
<h1><input required type="text" class="data_base1" name="data_1" size="60" value="DateBase : {{title1}}"><input required type="text" class="data_base2" name="data_1" size="60" value="Table : {{title2}}"></h1>
</div>

<style>
.botton_size{
    display: inline-block;
    width: 100%;
    border: 1px solid #999;
    box-sizing: border-box;
    background: #f2f2f2;
    font-size: 150%;
}
</style>

<div class="botton1">
<form action="/" method="get">
<input type="submit" class="botton_size" value='前ページへ戻る'></form>
</div>

<div class="botton2">
<form action="/" method="get">
<input type="submit" class="botton_size" value='ページ更新'></form>
</div>


        <table class="editable-table border="1" style="text-align: center;vertical-align:middle;">
            <thead>
                <tr>
                {% for col in col_1 %}
                    <th>{{col}}</th>
                {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for item in data %}
                <tr>
                {% for item_1 in item %}
                    <td contenteditable="true">{{item_1}}</td>
                {% endfor %}
                </tr>
                {% endfor %}
            </tbody>
        </table>

{% block footer %}
    <h5>Coryright 2020 Rope_blog </h5>
{% endblock %}



<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.resizableColumns.min.js') }}"></script>

<script>
$(function(){
    $("table").resizableColumns({
    });
});
</script> 
</body>
```

今回はcssやjsは問題ないと考えますので載せておりません。
また、iframeにしている理由は、iframe内でtableを表示させたいためです。
ここで、iframeの参照先のhtmlをstaticではなく、templatesの同層内にする方法も加えてご教示いただけますと幸いです。

何卒、よろしくお願いいたします。

Python3 Flask iframe操作について　変数受け渡しができない

あるページにiframeがあり、そのiframe内にはtableが設けられております。
ページにはボタンがあり(iframeの外にあります)、そのボタンを押すと、
iframe内のtableでアクティブになっている行のインデックスを取得し、最終的に、その行をtableから削除したいです。

```main.html
<div class="botton5">
<input type="button" onclick="iframe_test2()" id='insert_row' class="botton_size" value="削除">
</div>

<script>
  function iframe_test2(){
    var o_iframe = document.querySelector('iframe');
    var table_data = o_iframe.contentWindow.document.querySelector('.editable-table tbody');
    var obj = table_data.document.activeElement; 
    obj.tBodies[0].deleteRow(-1);
}
</script>

<div class="iframeBody">
    <iframe id="id_iframe" width="100%" height="650px"  src="{{ url_for('next_page2')}}";></iframe>
</div>
```

```iframe.html
<body> 
        <table border="1" class="editable-table" style="text-align: center;vertical-align:middle;">
            <thead>
                <tr class=chara1>
                    <th>◎</th>
                </tr>
            </thead>
            <tbody>
                <tr class=chara2>
                    <td contenteditable="true">◎</td>
                </tr>
            </tbody>
        </table>
</body> 
```

ちなみに、iframeには以下jsファイルを入れて、マウスカーソルが↑にあるセルの色を変えております。
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

```iframe.js
$(function() {
  $('.matrix').find('th, td').on('mouseenter', function() {
    // マウスカーソルがのっているセルが左から何番目かを取得
    var idx = $(this).parent().find('th, td').index(this);
    if (idx <= 0) return;
    var s = '.matrix tr > *:nth-of-type(' +(idx+1)+ ')';
    $(s).addClass('cursor');
  })
  .on('mouseleave', function() {
      // Classを全て削除
      $('.matrix *.cursor').removeClass('cursor');
  });
});
```

Javascript iframe内のtableのアクティブな行のインデックスを取得する

### 実現したいこと

1. テーブルが表示されています。
2. テーブルごとにボタンがあり、そのボタンを押すとボタンの色が変わります（Alpine.jsを利用）。
3. ボタンを押すことで、新しいデータが保存されますが、遷移すると赤いボタンが消えてしまうので、iframeで遷移させないようにする。






### 発生している問題・エラーメッセージ
ローカルでは問題なく動いたのですが、サーバーに上げたらipadでは問題なく動くも、iphoneでは赤いボタンにならないので、原因を知りたいです。

iframeもAlpine.jsも初めて使ったので、そもそもの原因がどちらかも分かっていません。どちらが原因かだけでも知れたら嬉しいです。どなたか、ご教授いただければ幸いです。


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

```php
search_result.blade.php
 <td>
                <iframe name="votar" style="display:none;"></iframe>
                    <form method="POST" action="{{ route('later',['id'=>$word->id])}}" target="votar">
                    @method('patch')
                    @csrf
                    <div x-data="{ show: false }">
                        <button @click="show = !show" :aria-expanded="show ? 'true' : 'false'" :class="{ 'active': show }">
                        あとでに保存する
                        </button>

                    </div>
                    </form>

                </td>
```


### 試してみたこと
iframeで検索すると”srcが～”という話が出てきたので、
 <iframe name="votar" style="display:none;">にsrc="{{url('search_result')}}"を入れるも変わらなかった。

### 参考サイト
[Alpine.jsのヒント](https://codepen.io/smashingmag/pen/QWbMBJj)
[iframeのヒント](https://www.edureka.co/community/87444/how-to-submit-form-without-page-reloading)


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

laravel8


iframeとAlpine.jsを利用した機能がスマホのみで実装されない

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をつけて、それをタッチして操作というのは実装できたのですが、やはり画面上をタッチしての操作を実装したいです。

他にも動画の手前に透明度を０にした要素を覆うように配置して操作というのも考えたのですがそうすると動画を再生したりする操作ができなくなってしまいます。