Python3 Flask 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
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件

jinja2を使う場合は、render_templateしないとダメです。
HTMLからしたら{% for col in col_1 %}などは単なる文字列に過ぎませんので、そのまま出ると思います。

render_templateで使うファイルnext_page2.htmlは、templatesフォルダに移動してください。

移動したら、例えば以下のようなエンドポイントを作成してください。

python
1# render_templateをimportしてください。from flask import render_template
2@app.route("/page_sample")
3def sample():
4    col_99  = "なんらかのデータ"  # なんらかのデータは必要なデータ形式で必要なデータを渡してください。 
5    data_99  = "なんらかのデータ"  # なんらかのデータは必要なデータ形式で必要なデータを渡してください。
6    item_99 = "なんらかのデータ"  # なんらかのデータは必要なデータ形式で必要なデータを渡してください。
7    return render_template('next_page2.html', col_1=col_99, data=data_99, item=item_99)

最後に、iframeの参照先を、作成したエンドポイントに変更してください。

html
1<iframe src="{{ url_for('sample') }}"></iframe>

投稿2023/01/13 02:35

FiroProchainezo

総合スコア2454

ベストアンサー

app.pyにnext_page2.htmlを表示する関数next_page2を用意する
next_page.html内のurl_forではファイルnext_page2.htmlではなく関数next_page2と任意の引数を渡す。

といった感じであればnext_page2.htmlもtemplates内に配置できてデータもnext_page2に引き渡すことができるようです。

app.py

Python
1from flask import Flask, render_template, request, url_for
2
3app = Flask(__name__)
4
5@app.route("/")
6def hello():
7    return render_template('index.html')
8
9@app.route("/next_page", methods=['POST'])
10def index():
11    if request.method == 'POST':
12        return render_template('/next_page.html',v1=123,v2='あいう') # 任意のデータ
13    else:
14        return render_template('index.html')
15
16@app.route("/hoge")
17def next_page2():
18    v1 =f'{request.args.get("v1")}(from next_page)'
19    v2 =f'{request.args.get("v2")}(from next_page)'
20    return render_template('next_page2.html', v1=v1, v2=v2) # データを引き渡す
21
22if __name__ == "__main__":
23    app.run(debug=True)

index.html

HTML
1<!DOCTYPE html><html lang="jp"><head><meta charset="UTF-8"><title>index</title></head>
2<body>
3<form action="/next_page" method="POST">
4<input type="submit" value="決定" class="submit1">
5</form>
6</body>
7</html>

next_page.html

HTML
1<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><title>next_page</title></head>
2<body>
3<p>next_page</p>
4<p>{{v1}},{{v2}}</p>
5<iframe src="{{ url_for('next_page2', v1=v1,v2=v2) }}" width=100%; height=600px;></iframe>
6</body>
7</html>

next_page2.html

HTML
1<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"></head></html>
2<body>
3<p>next_page2</p>
4<p>{{v1}},{{v2}}</p>
5</body>

投稿2023/01/13 02:31

8524ba23

総合スコア38350

shoshin-sha

2023/01/13 03:37

@app.route("/hoge") こちらこのままでいいでしょうか？ werkzeug.routing.exceptions.BuildError: Could not build url for endpoint 'next_page2'. Did you mean 'index' instead? と出ます。

shoshin-sha

2023/01/13 03:40

@app.route("/hoge")　こちらを入れると、index.htmlがiframeに入ります。

shoshin-sha

2023/01/13 03:40

@app.route("/next_page", methods=['POST']) def index(): global id2_ global id_ global path_ if request.method == 'POST': id2_ = request.form.get("user_id2") id_ = request.form.get('user_id') path_ = request.form.get('path1') # return render_template('next_page.html',\ return render_template('/next_page.html',v1=id2_,v2=id_,v3=path_) else: return render_template('index.html') @app.route("/hoge") def next_page2(): v2 =f'{request.args.get("v2")}(from next_page)' v1 =f'{request.args.get("v1")}(from next_page)' mydata = [] db = get_db() # sql = "select * from " + table_1 sql = "select * from " + v2 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_page2.html',\ title1=v1, \ title2=v2, \ col_1=df.columns, \ num=mydata[0], \ data=mydata)

shoshin-sha

2023/01/13 03:41

↓↓↓こちらは、next_page.html↓↓　変更後 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>データベース</title>  </head> <body> <p>元の画面</p> <iframe src="{{ url_for('next_page2')}}" width=100%; height=600px;></iframe> </body> </html>

shoshin-sha

2023/01/13 03:52

すみません。 @app.route("/hoge")　こちらで、とりあえずは、table表示ができました。ありがとうございます。ただ、sqlのためのテーブル取得ができていない状況です。 # V2 =f'{request.args.get("v2")}(from next_page)' # V1 =f'{request.args.get("v1")}(from next_page)' V2 =id2_ V1 =id_ とりいそぎは、こちらで解決しました

8524ba23

2023/01/13 04:05 編集

回答コードそのままではどうでしょうか？当方環境では正常に動作しています。なお、コメントでの提示コードにおいて exceptの中でreturn render_template('index.html')しているので例外にてここに到達しているのではないでしょうか？ DB接続まわりに問題があるように思います。例外を捕捉せずにデバッグトレースを確認したほうがよいでしょう。

行動規範の内容に同意します

あなたの回答