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>

效果图:

 

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值