日期:2014-05-16  浏览次数:20627 次

thikbox之iframe方式和ajax方式区别
最近这个项目引入了thickbox弹出框架,用safari浏览器测试页面,弹出层不能引用到js文件,慢慢查找才发现是thickbox弹出方式引起的。
一、为了方便,我们写了一个公共js:
function checkPopup(ev, title, url, width, height) {
	ev.preventDefault();
	if(url.indexOf("?") == -1){
		url += "?";
	}
	url += "&random=" + (new Date().getTime());
        //以iframe方式弹出层
        //url += "&random=" + (new Date().getTime()) + "&&TB_iframe=true";
        //tb_show(title, url, false);
	$.ajax({
		url: url, 
		async: false,
		success: function(data, status, xhr) {
			if (data.indexOf("loginWrap") == -1) {
				TB_WIDTH = width * 1 || 630;
				TB_HEIGHT = height * 1 || 440;
				tb_show(title, '', false);
				$("#TB_ajaxContent").html(data);
			}
			else {
				location.href= "";
			}
		}
	});
}

二、区别:
    iframe 方式,弹出层作为新的页面显示,浏览器读取新页面上导入的js文件,但是后续操作都在弹出层上,比如添加用户弹出层,添加完毕后,我们希望回到用户列表主层,这种方式会将主层显示在弹出层内。
    ajax方式,弹出层作为主层的一部分,部分浏览器-safari,无法读取弹出层自己引用的js文件,可以将这部分文件在主层引入,需要注意的是,弹出层的js不要写$(document).ready,因为在页面ready后,弹出层还没有出现,所以写在ready里面的函数对于弹出层依然无效,对弹出层而言,全部用onClick事件触发函数。