[Python知识库]flask使用iframe嵌套跳转界面

app.py:
@app.route('/infor') #页面链接该路由名称
def f_infor():
    return render_template('main.html')

# 词云分析
@app.route('/WordAnalysis') #页面链接该路由名称
def WordAnalysis():
    return render_template('WordAnalysis.html')

# 数据查询
@app.route('/test') #页面链接该路由名称
def test():
    return render_template('test.html')

layui:

//触发事件
var active = {
    tabChange: function (id) {
        //切换到指定Tab项
        element.tabChange('demo', id); //切换到：用户管理
    },
    ltabAdd: function (url, id, name) {
        //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
        //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
        element.tabAdd('demo', {
            title: name,
            url: 'test',
            content: '<iframe src="' + url + '" name="' + name + '" style="width:100%;height:99%;" frameborder="0" class="layadmin-iframe"></iframe>',
            id: id //规定好的id
        })
        CustomRightClick(id); //给tab绑定右击事件
        FrameWH();  //计算ifram层的大小

    }
};

html:

<li class="layui-nav-item">
        <a data-url="{{ url_for('WordAnalysis') }}" data-id="1" data-title="词云分析" href="#" class="site-demo-active"
           data-type="ltabAdd">词云分析</a>

    </li>
    <li class="layui-nav-item">
        <a data-url="{{url_for('test')}}" data-id="2" data-title="数据查询" href="#" class="site-demo-active"
           data-type="ltabAdd">数据查询</a>
    </li>
    <li class="layui-nav-item">
        <a data-url="{{url_for('test')}}" data-id="3" data-title="数据统计" href="#" class="site-demo-active"
           data-type="ltabAdd">数据统计</a>
    </li>
</ul>

效果图：

?