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

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

 
代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<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='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>

效果图：

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


原文出自：www.hangge.com  转载请保留原文链接：http://www.hangge.com/blog/cache/detail_434.html

posted on 2019-05-27 23:21  大西瓜3721  阅读(5898)  评论(0)    收藏  举报

导航