easyUI中tabs使用iframe的方式加载选项卡

向右看齐 2021-06-24 14:00 683阅读 0赞

使用了easyUi，发现panel组件的href比较坑人，不像extJs的html属性那样。今天遇到了tabs添加页签时需要使用iframe展示的问题，总结如下：

function addTab(title, href,icon){  
        var tt = $('#tabs');  
        if (tt.tabs('exists', title)){//如果tab已经存在,则选中并刷新该tab          
            tt.tabs('select', title);  
            refreshTab({tabTitle:title,url:href});  
        } else {  
            if (href){  
                var content = '<iframe scrolling="no" frameborder="0"  src="'+href+'" style="width:100%;height:100%;"></iframe>';  
            } else {  
                var content = '未实现';  
            }  
            tt.tabs('add',{  
                title:title,  
                closable:true,  
                content:content,  
                iconCls:icon||'icon-default'  
            });  
        }  
    }  
    /**     
     * 刷新tab 
     * @cfg  
     *example: {tabTitle:'tabTitle',url:'refreshUrl'} 
     *如果tabTitle为空，则默认刷新当前选中的tab 
     *如果url为空，则默认以原来的url进行reload 
     */  
    function refreshTab(cfg){  
        var refresh_tab = cfg.tabTitle?$('#tabs').tabs('getTab',cfg.tabTitle):$('#tabs').tabs('getSelected');  
        if(refresh_tab && refresh_tab.find('iframe').length > 0){  
        var _refresh_ifram = refresh_tab.find('iframe')[0];  
        var refresh_url = cfg.url?cfg.url:_refresh_ifram.src;  
        //_refresh_ifram.src = refresh_url;  
        _refresh_ifram.contentWindow.location.href=refresh_url;  
        }  
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，683人围观）

还没有评论，来说两句吧...

相关阅读

相关【LayUI】之动态树&动态选项卡Tab&iframe使用

目录 1.左侧导航 2.导入数据表及无限级分类 3.实现左侧菜单后台代码 4.前端左侧菜单绑定附录一：附录二：判断选项卡是否已经打开 1.什么是Ta

Myth丶恋晨/ 2024年04月08日 11:05/ 0 赞/ 87 阅读

相关 LayUI之动态选项卡Tab&iframe使用

目录一.LayUI之动态选项卡 1.什么是LayUI之选项卡？ 1.2layui选项卡使用语法 2. 在企业中LayUI选项卡的使用二.将la

墨蓝/ 2024年03月17日 19:10/ 0 赞/ 52 阅读

相关 easyUI快速入门第四讲——easyUI中的tabs（选项卡）组件

tabs（选项卡）组件的概述选项卡会显示一批面板，但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。 !

古城微笑少年丶/ 2023年06月11日 06:22/ 0 赞/ 27 阅读

相关基于easyui tabs选项卡的扩展插件--tabs单击事件

/ easyui tbas组件扩展单击事件 / $.extend($.fn.tabs.methods, { /

川长思鸟来/ 2022年09月22日 04:57/ 0 赞/ 309 阅读

相关 EasyUI之选项卡Tabs

1、实例背景 EasyUI选项卡Tabs，获取选中第几个并打印Tabs标签内容 2、实现实例 <!DOCTYPE html> <htm

骑猪看日落/ 2022年07月15日 13:07/ 0 赞/ 290 阅读

相关 jQuery EasyUI，Tabs(选项卡)组件

[https://www.cnblogs.com/adc8868/p/6647680.html][https_www.cnblogs.com_adc8868_p_6647680

末蓝、/ 2022年05月30日 12:36/ 0 赞/ 349 阅读

相关 easyUI选项卡—右键关闭tabs

今天在改一个easyUI界面时，有个这样的需求，要我通过在选项卡上绑定一个右击事件，做到tabs全部关闭，或关闭左右变的。因为自己对easyUI不是很熟，导致搞这个功能花了比较

妖狐艹你老母/ 2022年05月28日 11:07/ 0 赞/ 381 阅读

相关 tab选项卡

tab选项卡 tab选项卡 tab选项卡可以说是一个可以在一个·规定的位置中可以嵌套多个页面或小页面，也可以说是一本笔记本可以有很多张纸，那么多纸都封装在笔记本里面，可以

た入场券/ 2022年01月21日 09:47/ 0 赞/ 489 阅读

相关 easyui刷新当前选项卡tabs

刷新当前tab var currTab = self.parent.$('tabs').tabs('getSelected'); //获得当前tab

深碍√TFBOYSˉ_/ 2021年09月16日 23:10/ 0 赞/ 465 阅读

相关 easyUI中tabs使用iframe的方式加载选项卡

使用了easyUi，发现panel组件的href比较坑人，不像extJs的html属性那样。今天遇到了tabs添加页签时需要使用iframe展示的问题，总结如下： f

向右看齐/ 2021年06月24日 14:00/ 0 赞/ 684 阅读