如何将dashboard.html的domain_name传入iframe加载的Flask应用后端

问题背景 #

主应用基于Flask开发，用户登录后提取邮箱中的domain_name并传递到dashboard.html。点击页面按钮时，需在iframe中加载不同端口的子应用（如application1），同时要将domain_name传递给子应用的Flask后端，且不能破坏dashboard页面结构（避免跳转子应用页面）。

可行解决方案 #

方案1：URL查询参数传递（推荐非敏感场景） #

直接将domain_name作为查询参数拼接到iframe的src中，子应用后端通过request.args获取，实现简单且不破坏页面结构。

修改dashboard.html的JavaScript逻辑

testDomainName = "{{ domain_name }}";
const buttons = document.querySelectorAll('.points button');
const iframe = document.getElementById('iframe-container');

buttons.forEach(button => {
    button.addEventListener('click', function () {
        // 按钮选中状态切换
        buttons.forEach(btn => btn.classList.remove('selected-button'));
        this.classList.add('selected-button');
        
        const src = this.getAttribute('data-src');
        // 将domain_name编码后拼接到URL
        iframe.src = `${src}?domain=${encodeURIComponent(testDomainName)}`;
        
        // 设置iframe高度
        const screenHeight = window.innerHeight;
        const spaceAtBottom = 20;
        iframe.style.height = `${screenHeight - 90 - spaceAtBottom}px`;
    });
});

子应用application1的app.py处理

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/')
def index():
    # 从URL参数获取domain_name
    domain_name = request.args.get('domain')
    # 后续业务逻辑
    return render_template('app1.html', domain=domain_name)

if __name__ == '__main__':
    app.run(port=5002)

方案2：POST请求加载iframe（适合敏感数据） #

通过创建隐藏表单并指定提交目标为iframe，避免domain_name暴露在URL中，同时保持dashboard页面结构不变。

修改dashboard.html

1. 给iframe添加name属性：

<iframe class="iframe-container" id="iframe-container" name="app-iframe" src=""></iframe>

2. 给application1的按钮添加id：

<button id="app1-btn" data-src="http://123.23.23.23:5002"><span>Application1</span></button>

3. 修改JavaScript逻辑：

testDomainName = "{{ domain_name }}";
const buttons = document.querySelectorAll('.points button');
const iframe = document.getElementById('iframe-container');

buttons.forEach(button => {
    button.addEventListener('click', function () {
        // 按钮选中状态切换
        buttons.forEach(btn => btn.classList.remove('selected-button'));
        this.classList.add('selected-button');
        
        const src = this.getAttribute('data-src');
        const domainName = testDomainName;
        
        if (this.id === 'app1-btn') {
            // 创建表单并指定提交目标为iframe
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `${src}/process`;
            form.target = 'app-iframe'; // 关键：让提交结果在iframe中展示
            
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'domain';
            input.value = domainName;
            
            form.appendChild(input);
            document.body.appendChild(form);
            form.submit();
            // 提交后移除临时表单
            setTimeout(() => form.remove(), 100);
        } else {
            // 其他应用可使用URL参数方式
            iframe.src = `${src}?domain=${encodeURIComponent(domainName)}`;
        }
        
        // 设置iframe高度
        const screenHeight = window.innerHeight;
        const spaceAtBottom = 20;
        iframe.style.height = `${screenHeight - 90 - spaceAtBottom}px`;
    });
});

子应用application1的app.py处理POST请求

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/process', methods=['POST'])
def process_domain():
    # 从POST表单获取domain_name
    domain_name = request.form.get('domain')
    # 业务处理后返回页面
    return render_template('app1_dashboard.html', domain=domain_name)

if __name__ == '__main__':
    app.run(port=5002)

方案3：Cookie共享（同域名多子应用场景） #

若主应用与子应用同域名（如均为123.23.23.23，仅端口不同），可通过Cookie传递domain_name，无需前端额外处理。

主应用dashboard路由设置Cookie

from flask import Flask, render_template, make_response, session

app = Flask(__name__)
app.secret_key = 'your-secret-key'

@app.route('/dashboard')
def dashboard():
    # 从登录邮箱提取domain_name
    domain_name = session['user_email'].split('@')[1]
    # 渲染页面并设置Cookie
    response = make_response(render_template('dashboard.html', domain_name=domain_name))
    # 设置Cookie，IP场景下domain留空即可跨端口共享
    response.set_cookie('domain_name', domain_name, httponly=False)
    return response

子应用application1的app.py读取Cookie

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/')
def index():
    # 从Cookie获取domain_name
    domain_name = request.cookies.get('domain_name')
    # 业务逻辑处理
    return render_template('app1.html', domain=domain_name)

if __name__ == '__main__':
    app.run(port=5002)

方案选择建议 #

• URL参数：优先选择，实现简单，适合非敏感数据传递。
• POST到iframe：适合需要隐藏参数的场景，需子应用支持POST路由。
• Cookie共享：适合同域名下多个子应用共享数据的场景，无需前端干预。

内容的提问来源于stack exchange，提问作者sst