フォーム画面(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
1from flask import Flask, render_template, request, session, url_for, redirect, jsonify,g 2from flask.views import MethodView 3import sqlite3,pickle 4import pandas as pd 5 6app = Flask(__name__) 7 8data_base="◎◎.db" 9table_1="◎◎" 10 11app = Flask(__name__) 12 13def get_db(): 14 if 'db' not in g: 15 g.db = sqlite3.connect(◎◎◎◎◎◎) 16 return g.db 17 18def close_db(e=None): 19 db = g.pop('db', None) 20 21 if db is not None: 22 db.close() 23 24 25#「/」へアクセスがあった場合 26@app.route("/") 27def hello(): 28 return render_template('index.html') 29 30@app.route("/next_page", methods=['POST']) 31def index(): 32 33 if request.method == 'POST': 34 id2_ = request.form.get("user_id2") 35 id_ = request.form.get('user_id') 36 path_ = request.form.get('path1') 37 38 mydata = [] 39 db = get_db() 40 sql = "select * from " + id2_ 41 42 try: 43 cur = db.execute(sql) 44 except: 45 return render_template('index.html') 46 47 mydata = cur.fetchall() 48 df=pd.read_sql(sql,g.db) 49 50 return render_template('/next_page.html',\ 51 title1=id_, \ 52 title2=id2_, \ 53 col_1=df.columns, \ 54 num=mydata[0], \ 55 data=mydata) 56 57 else: 58 return render_template('index.html') 59 60#app.pyをターミナルから直接呼び出した時だけ、app.run()を実行する 61if __name__ == "__main__": 62 app.run(debug=True)
templatesフォルダ内のhtml
idex.html
1<!DOCTYPE html> 2<html lang="jp"> 3<head> 4 <meta charset="UTF-8"> 5 <title>データベース</title> 6 <link rel="stylesheet" href="static/css/style.css"> 7</head> 8 9<form action="/next_page" method="POST"> 10<table class="form-table"> 11 <tbody> 12 <tr> 13 <th>参照パス</th> 14 <td><input required type="text" class="id1" name="path1" size="60" value="" list="example1" > 15 </td> 16 <datalist id="example1"> 17 <option value=""></option> 18 <option value="サンプル2"></option> 19 <option value="サンプル3"></option> 20 </datalist> 21 </tr> 22 <tr> 23 <th>データベース名</th> 24 <td><input required type="text" class="id1" name="user_id" size="60" list="example2" value="" placeholder="product1.db"> 25 </td> 26 <datalist id="example2"> 27 <option value="サンプル1"></option> 28 <option value="サンプル2"></option> 29 <option value="サンプル3"></option> 30 </datalist> 31 </tr> 32 <tr> 33 <th>テーブル名</th> 34 <td><input required type="text" class="id2" name="user_id2" size="60" value="" list="example3" placeholder="product10"> 35 </td> 36 <datalist id="example3"> 37 <option value="サンプル4"></option> 38 <option value="サンプル5"></option> 39 <option value="サンプル6"></option> 40 </datalist> 41 42 </tr> 43 </tbody> 44 </table> 45 46 <div class="example"> 47 <input type="submit" value="決定" class="submit1"> 48 </div> 49</form>
next_page.html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>データベース</title> 6<!-- <link rel="stylesheet" href="static/css/style.css">--> 7 </head> 8 <body> 9 <p>元の画面</p> 10 <iframe src="{{ url_for('static', filename='next_page2.html') }}" width=100%; height=600px;></iframe> 11 </body> 12</html>
staticフォルダ内のhtml (iframe内のファイル)
next_page2.html
1<!DOCTYPE html><html lang="ja"> 2<head> 3<meta charset="utf-8"> 4<meta http-equiv="X-UA-Compatible" content="IE=edge"> 5<!--<meta name="viewport" content="width=device-width, initial-scale=1">--> 6 7<link rel="stylesheet" href="static/css/style_next.css"> 8<link rel="stylesheet" href="{{ url_for('static', filename='css/jquery.resizableColumns.css') }}" /> 9 10<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 11<script src="static/js/editable-table.js"></script> 12<link href="static/css/editable-table.css" rel="stylesheet">--> 13</head></html> 14 15<body> 16 17<div class="site-header"> 18<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> 19</div> 20 21<style> 22.botton_size{ 23 display: inline-block; 24 width: 100%; 25 border: 1px solid #999; 26 box-sizing: border-box; 27 background: #f2f2f2; 28 font-size: 150%; 29} 30</style> 31 32<div class="botton1"> 33<form action="/" method="get"> 34<input type="submit" class="botton_size" value='前ページへ戻る'></form> 35</div> 36 37<div class="botton2"> 38<form action="/" method="get"> 39<input type="submit" class="botton_size" value='ページ更新'></form> 40</div> 41 42 43 <table class="editable-table border="1" style="text-align: center;vertical-align:middle;"> 44 <thead> 45 <tr> 46 {% for col in col_1 %} 47 <th>{{col}}</th> 48 {% endfor %} 49 </tr> 50 </thead> 51 <tbody> 52 {% for item in data %} 53 <tr> 54 {% for item_1 in item %} 55 <td contenteditable="true">{{item_1}}</td> 56 {% endfor %} 57 </tr> 58 {% endfor %} 59 </tbody> 60 </table> 61 62{% block footer %} 63 <h5>Coryright 2020 Rope_blog </h5> 64{% endblock %} 65 66<!--<script type=”text/javascript” src="{{ url_for('static', filename='js/next_page.js') }}"></script>--> 67 68<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 69<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.resizableColumns.min.js') }}"></script> 70 71<script> 72$(function(){ 73 $("table").resizableColumns({ 74 }); 75}); 76</script> 77</body>
今回はcssやjsは問題ないと考えますので載せておりません。
また、iframeにしている理由は、iframe内でtableを表示させたいためです。
ここで、iframeの参照先のhtmlをstaticではなく、templatesの同層内にする方法も加えてご教示いただけますと幸いです。
何卒、よろしくお願いいたします。

回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。