遮罩层解决jQuery UI Dialog 内嵌iFrame拖曳缓慢问题

不知道大家使用jQuery UI Dialog 内嵌iFrame页面时候遇到拖曳延迟等问题没有，或者是对mousedown，mouseup事件触发不敏感。特别在同时弹出多个dialog非常明显。很明显问题症结所在就是iframe，所以对症下药就是要把iframe藏起来。在同时不影响用户体验的同时，我的解决方案是：在触发拖曳事件前将整个dialog加一层透明遮罩层，拖曳停止remove掉这个遮罩层。直接贴代码，由于只贴部分关键处理代码。。如果有兴趣可以留言给我。

代码片段：

 

//弹出页：frame页面
function showFrameDialog(url,pageid,height,width) {
	screenWidth = screenWidth || $(document).width();
	screenHeight = screenHeight || $(document).height();

	var maxZindex = getNextZindex();
	onActivePageId = pageid;
	//页面显示前调用
	try {beforeFrameDialogShow(onActivePageId);} catch (e) {}
	
	var pageIsOpen = false;
	
	var dialogCount = 0;
	$("iframe").each(function(){
		
		dialogCount++;
		
		var $dialog = $(this).parent().parent();
		var key = $(this).attr('key');
		if(pageid == key){
			//alert("page[key:"+pageid+"] Is Open");
			pageIsOpen = true;
			//set z-index at top
			$dialog.css("z-index",maxZindex);
			//set position in center
			resetDialogPosition($dialog);
		}else{
			//reset position
			var offset = (dialogCount%2==0)? 15: -15;
			var _top =  $dialog.position().top + 5;
			var _left = $dialog.position().left + offset;
			//
			resetDialogPosition($dialog,_left,_top);
		}
	});
	
	if(pageIsOpen)return;
	
	var w = width || 450;
	var h = height || 285;
	
	var split = (url.indexOf("?")>0)?"&":"?";
	url = url + split + "__time=" + new Date().getTime()+"&pageid="+pageid;

	var div = document.createElement("div");
	var iframeHtml = " <iframe winStatu='Normal' id='ifr_"+pageid+"' name='ifr_"+pageid+"' width='" + w
			+ "px' height='" + h + "px' src='" + url
			+ "' frameborder=0 scrolling='no' key='"+ pageid +"'></iframe>";
	var finalTitle = openedTitles[pageid];
	$(div).attr('id', 'div_'+pageid);
	$(div).attr('divHeight', h);
	$(div).attr('divWidth', w);
	$(div).attr('title', finalTitle ? finalTitle : 'Page is Loading...');
	$(div).html(iframeHtml);
	
	var dlg = $(div).dialog( {
		height : h,
		width : w,
		zIndex:maxZindex,
		resizable : false,
		bgiframe: true,
		beforeclose: function(event, ui) {
		    refreshProperties(true);
		    //页面关闭前调用
			try{beforeFrameDialogClose(pageid);}catch(err){}
			dlg.remove();
	    },
	    dragStart: function(event, ui) {},
	    drag: function(event, ui) {
	    	onActivePageId = pageid;
	    	try{onActivePage(onActivePageId);}catch(err){}
	    },
	    dragStop: function(event, ui) { }
	});
	
	//--------------解决拖曳延迟问题 add by vakin 20110818-------------------
    var $waterfall = addWaterfall('#div_'+pageid);
    $waterfall.hide();
	var $headerBar = $('#div_'+pageid).prev();
	$headerBar.bind('mousedown',function(){		
			window.console.info.apply(window.console, ["mousedown"]);
			$waterfall.show();
	});	
	$headerBar.bind('mouseup',function(){
			window.console.info.apply(window.console, ["mouseup"]);	
			$waterfall.hide();
	});
	//--------------add by vakin 20110818 end-------------------
	
	if(finalTitle)return;
	var frameElm = window.frames['ifr_'+pageid];
	if (frameElm.attachEvent) {
		frameElm.attachEvent("onload", function() {
			setDialogTitle(frameElm,pageid);
		});
	} else {
		try {
			frameElm.onload = function() {
				setDialogTitle(frameElm,pageid);
			};
		} catch (e) {}
		
	}
}


/*iframe加载完成调用*/
function setDialogTitle(frameElm,pageid,defaultTitle){
	var pageTitle = defaultTitle || frameElm.document.title;
	$("span.ui-dialog-title").each(function(){
		 var $this = $(this);
		 if($this.attr('id').indexOf(pageid)>0){
			 $this.text(pageTitle);
			 openedTitles[pageid] = pageTitle;
			 return false;
		 }
	});
}

//增加遮罩层
function addWaterfall(outterDiv){
	var waterfall = $(document.createElement("div"));
			waterfall.css( {
				"height" : "100%",
				"width" : "100%",
				"filter" : "alpha(opacity = 50)",
				"-moz-opacity" : "0.1",
				"opacity" : "0.1",
				"background-color" : "#fff",
				"position" : "absolute",
				"left" : "0px",
				"top" : "30px",
				"display":"none"
			});
			$(waterfall).appendTo(outterDiv);
			$(waterfall).bind('click',function(){
			    $(this).hide();
			});
	 return $(waterfall);
}

 

 

淘宝入口：http://item.taobao.com/item.htm?id=13440256831

 

评论

1 楼 0obeiiedo0 2011-10-31  

楼主，你好。我现在遇到个问题。我的页面是用 iframe 的。就是分了三个部分。头部，左侧，右侧。左侧是菜单，右侧是显示的页面。我在右侧页面做修改时用 jquery dialog 的时候，这个 dialog 只覆盖了右侧页面，我想要让它把所有页面都覆盖，也就是也就是整个页面，而不是只是右侧的，楼主有解决办法吗 ？