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

jQuery - 动态创建iframe并加载页面的更多相关文章

  1. ExtJs非Iframe框架加载页面实现

    在用Ext开发App应用时,一般的框架都是左边为菜单栏,中间为tab页方式的显示区域.而tab页面大多采用的嵌入一个iframe来显示内容.但是采用iframe方式有一个很大的弊端就是每次在加载一个新 ...

  2. 关于IE8中使用Jquery load方法无法正常加载页面

    最近发现,在IE8中使用Jquery load方法时无法正常加载页面,页面显示空白,没有加载.调试发现,页面多了一个</div>标签,但在FF和CH下表现正常.希望能给遇到同样问题的码农有 ...

  3. jQuery load() 判断 iframe 是否加载完毕

    判断 iframe 是否加载完毕  方法.jQuery load() var frm = document.getElementById('myiframe'); $(frm).load(functi ...

  4. jquery中的load方法加载页面无法缓存问题

    在A页面中调用JQuery中的load方法,加载另一个B页面,B页面中的样式文件和JS文件无法从浏览器缓存中获取,每次都是实时获取.这是因为B页面的HTML经load方法处理后,会为每个样式和JS文件 ...

  5. javascript动态创建script标签,加载完成后调用回调

    代码如下: var head = document.getElementsByTagName('head')[0]; var script = document.createElement('scri ...

  6. jquery load(URL,FUNCTION(){}) 异步加载页面

    $("#btnSearch").click(function () { var queryUrl = '/Report/LoadInsClassifFileNew'; if ($( ...

  7. 解决pjax加载页面不执行js插件的问题

    个人博客 地址:http://www.wenhaofan.com/article/20180913220425 介绍 在使用jquery.pjax的时候发现加载页面时不会执行其中的layui以及jqu ...

  8. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

  9. 使用jquery的load方法设计动态加载，并解决被加载页面JavaScript失效问题

    一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根 ...

随机推荐

  1. JavaScript制作时钟特效

    需求说明:制作显示年.月.日.星期几并且显示上午(AM)和下午(PM)的 12进制的时钟,具体效果如下所示: 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C// ...

  2. Python基本数据类型之list

    一.创建列表: li = [] li = list() name_list = ['alex', 'seven', 'eric'] name_list ＝ list(['alex', 'seven', ...

  3. angular评论星级指令

    地址: https://github.com/happen-zh/myStar 支持最大数,是否必填,回调,是否只读

  4. Altium Designer 多个输出相连等问题报错解决方法

    问题: Altium Designer软件中,项目编译时,Message面板出现,如下错误: Net NetR121_1 contains multiple Output Pins; PC10 con ...

  5. JSP 原理

    参考文献:http://www.cnblogs.com/xdp-gacl/p/3764991.html 一.什么是JSP? JSP全称是Java Server Pages,它和servle技术一样,都 ...

  6. LeetCode —— Invert Binary Tree

    struct TreeNode* invertTree(struct TreeNode* root) { if ( NULL == root ) { return NULL; } if ( NULL ...

  7. 关于MarshalByRefObject的解释

    http://www.cnblogs.com/webfpc/archive/2010/03/10/1667101.html 首先了解一下不同应用程序域中的对象的通信方式有两种: 一种是跨应用程序域边界 ...

  8. centos 7.0最小化安装 查看yum 所有安装的软件包~

    使用命令 yum list installed [root@localhost ~]# yum list installed 已加载插件:fastestmirror base | 3.6 kB 00: ...

  9. Yii2.0-生成二维码实例

    原文地址:http://www.yii-china.com/post/detail/19.html

  10. Mysql利用mysql_multi配置一台主机多个实例（转）

    在Mysql官方帮助文档中,详细记录中Mysql的启动方式,有mysqld_safe.mysql.server.mysql_multi这三种.关于mysql_multi的介绍: Mysqld_mult ...