jQuery - 动态创建iframe并加载页面

2014-11-28 发布：hangge 阅读：40467

使用jQuery可以方便的创建html对象。下面例子是通过传入的url和宽度高度，动态的在页面中央创建一个iframe并加载内容。同时在iframe后面还会添加一个灰色的遮罩，点击遮罩便可以移除iframe和遮罩。

代码如下：

<html>
<head>
<script language="JavaScript" src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script language="JavaScript" type="text/JavaScript">
/**
弹出iframe页面(iframe后面会添加灰色蒙版)
**/
function showIframe(url,w,h){
	//添加iframe
	var if_w = w;  
    var if_h = h;  
	//allowTransparency='true' 设置背景透明
	$("<iframe width='" + if_w + "' height='" + if_h + "' id='YuFrame1' name='YuFrame1' style='position:absolute;z-index:4;'  frameborder='no' marginheight='0' marginwidth='0' allowTransparency='true'></iframe>").prependTo('body'); 	
	var st=document.documentElement.scrollTop|| document.body.scrollTop;//滚动条距顶部的距离
	var sl=document.documentElement.scrollLeft|| document.body.scrollLeft;//滚动条距左边的距离
	var ch=document.documentElement.clientHeight;//屏幕的高度
	var cw=document.documentElement.clientWidth;//屏幕的宽度
	var objH=$("#YuFrame1").height();//浮动对象的高度
	var objW=$("#YuFrame1").width();//浮动对象的宽度
	var objT=Number(st)+(Number(ch)-Number(objH))/2;
	var objL=Number(sl)+(Number(cw)-Number(objW))/2;
	$("#YuFrame1").css('left',objL);
	$("#YuFrame1").css('top',objT);

	$("#YuFrame1").attr("src", url)

	//添加背景遮罩
	$("<div id='YuFrame1Bg' style='background-color: Gray;display:block;z-index:3;position:absolute;left:0px;top:0px;filter:Alpha(Opacity=30);/* IE */-moz-opacity:0.4;/* Moz + FF */opacity: 0.4; '/>").prependTo('body');  
	var bgWidth = Math.max($("body").width(),cw);
	var bgHeight = Math.max($("body").height(),ch);
	$("#YuFrame1Bg").css({width:bgWidth,height:bgHeight});

	//点击背景遮罩移除iframe和背景
	$("#YuFrame1Bg").click(function() {
		$("#YuFrame1").remove();
		$("#YuFrame1Bg").remove();
	});
}
</script>
</head>
<body>
<input type="button" onClick="showIframe('http://hangge.com',460,280)" value="加载"/>
</body>
<html>

效果图：