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

最新推荐文章于 2023-04-17 14:49:31 发布

weixin_30912051

最新推荐文章于 2023-04-17 14:49:31 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/geniussoft/p/4745494.html

该博客介绍了如何利用JavaScript库jQuery动态创建iframe，并将指定的网页内容加载到这个iframe中，详细阐述了相关步骤和代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>