Flaskで、動的なURLのインラインフレームを作る

Question

前提

Flaskで、インラインフレーム内のHTMLを作るには以下のようにします。
ここではmain.htmlの中にsub.htmlが作られるとします。

<iframe src="{{url_for('show_iframe')}}"></iframe>

@app.route("/hoge")
def show_iframe():
    return render_template("sub.html")

また、リンク先を変数的に扱うには以下のようにします。
ここではsub/1、sub/2、sub/3にアクセスするとsub1.html、sub2.html、sub3.htmlが作られます。

@app.route("/sub/num")
def show_sub(num):
    url = f"sub{num}.html"
    return render_template(url)

実現したいこと

では、main.htmlのインラインフレーム内に動的にsub1.htmlもしくはsub2.htmlもしくはsub3.htmlを作るにはどうしたらよいのでしょうか。
Pythonだから関数の引数にデフォルト値を指定するやり方もあると便利だと思うのですが。

Answer 1

解決したようで何よりです。どうしてもmain.html全体の再レンダリングをせずにiframeのsrcだけ変えたい場合は、JavaScriptを組み合わせることになると思います。以下、やっつけ実装の例です。動作確認まではしてないので、間違いがあったらスミマセン。

• main.html

<iframe id="id1" src="{{ url_for('show_iframe', num=num) }}"></iframe>

<ul>
  <li><button id="num1">num=1</button></li>
  <li><button id="num2">num=2</button></li>
</ul>

<script>
function changeIframeSrc(num) {
  targetFrame = document.getElementById("id1");
  targetFrame.src="{{ url_for('show_iframe') }}" + "/" + num;
}
b1 = document.getElementById("num1");
b1.addEventListener("click", event => { changeIframeSrc(1) });
b2 = document.getElementById("num2");
b2.addEventListener("click", event => { changeIframeSrc(2) });
</script>

• Flaskアプリのコード

# （省略）

# iframeの中のレンダリング
@app.route("/hoge/", defaults={num: 1})
@app.route("/hoge/<int:num>")
def show_iframe(num):
    url = f"sub{num}.html"
    return render_template(url)

Comments

[mo256man]

これはすごい！
今回の質問とは別に、JavaScriptでinnerHTMLを変更するようにFlaskのレンダリングも一部だけできないかなとも思っていたのです。

@app.route("/hoge/", defaults={num: 1}) 　の部分、変数…というか変数の名前を定義するのは
@app.route("/hoge/", defaults={"num": 1})　とするのが正しいようですね。

Answer 2

こうすることで対応できました。
msiz07さんありがとうございます。

<iframe src="url_for('show_sub', num=num)"></iframe>

# 起動時はinframeの中はsub1で決め打ち
@app.route("/")
def main():
    return render_template("main.html", num=1)

# sub/1、sub/2、sub/3 からの対応
@app.route("/sub/<int:num>")
def show_sub(num):
    return render_template("main.html", num=num)

# iframeの中のレンダリング
@app.route("/hoge/<int:num>")
def show_iframe(num):
    url = f"sub{num}.html"
    return render_template(url)

main.htmlの中のiframeだけ変更したいが、main.html全体を再レンダリングする必要があるというわけですね。

Answer 3

質問の内容を理解できているか確信を持てませんが、やりたいのは以下のようなことでしょうか？

• main.html

<iframe src="url_for('show_sub', num=num)"></iframe>

• Flaskアプリのコード

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/hoge/<int:num>")
def show_iframe(num):
    return render_template("main.html", num=num)

@app.route("/sub/<int:num>")
def show_sub(num):
    url = f"sub{num}.html"
    return render_template(url)

勘違いなどあれば、ご指摘ください。

Comments

[mo256man]

関数 show_sub(num) の戻り値が render_template(url) だと、iframeでなくページそのものが変わってしまいますね。

…わかった！
ここではMarkdownが使えないので自己解決欄に書きます。
ヒントありがとうございました。