解决方案一(转)、
效果:http://www.easyui.info/easyui/demo/tabs/iframeload.html#
$(function(){
//$('#tabs').tabs('addEventParam');
});
var count = 0;
function addIframeTab(){
$('#tabs').tabs('addIframeTab',{
//tab参数为一对象,其属性同于原生add方法参数
tab:{
title:'iframe'+count++,
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(e){
var title = $(e.target).parent().parent().text();
$('#tabs').tabs('updateIframeTab',{'which':title});
}
}]
},
//iframe参数用于设置iframe信息,包含:
//src[iframe地址],frameBorder[iframe边框,,默认值为0],delay[淡入淡出效果时间]
//height[iframe高度,默认值为100%],width[iframe宽度,默认值为100%]
iframe:{src:'http://www.baidu.com'}
});
$('#tabs').tabs('addEventParam');
}
扩展插件:
/**
* @author {CaoGuangHui}
*/
$.extend($.fn.tabs.methods, {
/**
* tabs组件每个tab panel对应的小工具条绑定的事件没有传递事件参数
* 本函数修正这个问题
* @param {[type]} jq [description]
*/
addEventParam: function(jq) {
return jq.each(function() {
var that = this;
var headers = $(this).find('>div.tabs-header>div.tabs-wrap>ul.tabs>li');
headers.each(function(i) {
var tools = $(that).tabs('getTab', i).panel('options').tools;
if (typeof tools != "string") {
$(this).find('>span.tabs-p-tool a').each(function(j) {
$(this).unbind('click').bind("click", {
handler: tools[j].handler
}, function(e) {
if ($(this).parents("li").hasClass("tabs-disabled")) {
return;
}
e.data.handler.call(this, e);
});
});
}
})
});
},
/**
* 加载iframe内容
* @param {jq Object} jq [description]
* @param {Object} params params.which:tab的标题或者index;params.iframe:iframe的相关参数
* @return {jq Object} [description]
*/
loadTabIframe:function(jq,params){
return jq.each(function(){
var $tab = $(this).tabs('getTab',params.which);
if($tab==null) return;
var $tabBody = $tab.panel('body');
//销毁已有的iframe
var $frame=$('iframe', $tabBody);
if($frame.length>0){
try{//跨域会拒绝访问,这里处理掉该异常
$frame[0].contentWindow.document.write('');
$frame[0].contentWindow.close();
}catch(e){
//Do nothing
}
$frame.remove();
if($.browser.msie){
CollectGarbage();
}
}
$tabBody.html('');
$tabBody.css({'overflow':'hidden','position':'relative'});
var $mask = $('<div style="position:absolute;z-index:2;width:100%;height:100%;background:#ccc;z-index:1000;opacity:0.3;filter:alpha(opacity=30);"><div>').appendTo($tabBody);
var $maskMessage = $('<div class="mask-message" style="z-index:3;width:auto;height:16px;line-height:16px;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-92px;border:2px solid #d4d4d4;padding: 12px 5px 10px 30px;background: #ffffff url(\'../../themes/default/images/loading.gif\') no-repeat scroll 5px center;">' + (params.iframe.message || 'Processing, please wait ...') + '</div>').appendTo($tabBody);
var $containterMask = $('<div style="position:absolute;width:100%;height:100%;z-index:1;background:#fff;"></div>').appendTo($tabBody);
var $containter = $('<div style="position:absolute;width:100%;height:100%;z-index:0;"></div>').appendTo($tabBody);
var iframe = document.createElement("iframe");
iframe.src = params.iframe.src;
iframe.frameBorder = params.iframe.frameBorder || 0;
iframe.height = params.iframe.height || '100%';
iframe.width = params.iframe.width || '100%';
if (iframe.attachEvent){
iframe.attachEvent("onload", function(){
$([$mask[0],$maskMessage[0]]).fadeOut(params.iframe.delay || 'slow',function(){
$(this).remove();
if($(this).hasClass('mask-message')){
$containterMask.fadeOut(params.iframe.delay || 'slow',function(){
$(this).remove();
});
}
});
});
} else {
iframe.onload = function(){
$([$mask[0],$maskMessage[0]]).fadeOut(params.iframe.delay || 'slow',function(){
$(this).remove();
if($(this).hasClass('mask-message')){
$containterMask.fadeOut(params.iframe.delay || 'slow',function(){
$(this).remove();
});
}
});
};
}
$containter[0].appendChild(iframe);
});
},
/**
* 增加iframe模式的标签页
* @param {[type]} jq [description]
* @param {[type]} params [description]
*/
addIframeTab:function(jq,params){
return jq.each(function(){
if(params.tab.href){
delete params.tab.href;
}
$(this).tabs('add',params.tab);
$(this).tabs('loadTabIframe',{'which':params.tab.title,'iframe':params.iframe});
});
},
/**
* 更新tab的iframe内容
* @param {jq Object} jq [description]
* @param {Object} params [description]
* @return {jq Object} [description]
*/
updateIframeTab:function(jq,params){
return jq.each(function(){
params.iframe = params.iframe || {};
if(!params.iframe.src){
var $tab = $(this).tabs('getTab',params.which);
if($tab==null) return;
var $tabBody = $tab.panel('body');
var $iframe = $tabBody.find('iframe');
if($iframe.length===0) return;
$.extend(params.iframe,{'src':$iframe.attr('src')});
}
$(this).tabs('loadTabIframe',params);
});
}
});
解决方案二、待解决。