easyUI中tabs使用iframe的方式載入選項卡
阿新 • • 發佈:2019-01-07
使用了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; } }