<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. JavaWeb---总结(十七)JSP中的九个内置对象

    一.JSP运行原理 每个JSP 页面在第一次被访问时,WEB容器都会把请求交给JSP引擎(即一个Java程序)去处理.JSP引擎先将JSP翻译成一个_jspServlet(实质上也是一个servlet ...

  2. js014-表单脚本

    js014-表单脚本 本章内容: 理解表单 文本框验证与交互 使用其他表单控制 14.1 表单的基础知识 在HTML中,表单时由<form>元素来表示的,在JS中,表单对应的时HTMLFo ...

  3. 转：在VS2010下编译、调试和生成mex文件

    最近帮人调了一个程序,是网上公开的代码,利用matlab与c++混合编程做三维模型关键点检测,发现他们可以用VS2010编译.调试.生成mexw32文件,因此觉得之前在Matlab上利用mex命令真是 ...

  4. sphinx ：undefined reference to `libiconv' 报错解决办法

    sphinx :undefined reference to `libiconv' 报错解决办法   2013-11-30 21:45:39 安装sphinx时不停报错...郁闷在make时报错,错误 ...

  5. 为什么可以用while(cin)?

    为什么可以用while(cin)?   /** * @brief The quick-and-easy status check. * * This allows you to write const ...

  6. hdu 5878 I Count Two Three (2016 ACM/ICPC Asia Regional Qingdao Online 1001)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5878 题目大意: 给出一个数n ,求一个数X, X>=n. X 满足一个条件 X= 2^a*3^ ...

  7. 字体投影（test-shadow）与框架投影（box-shadow）

    字体投影:text-shadow: 1px 1px 1px #ccc; 框架投影:box-shadow: 10px 10px 25px #ccc;

  8. MBProgressHUD+FastCall

    + (void)showHudTipStr:(NSString *)tipStr; + (void)showHudTipStr:(NSString *)tipStr{ ) { MBProgressHU ...

  9. php Hash Table(三) Hash Table初始化

    HashTable初始化,在使用HashTable之前要先执行初始化,下边就看看初始化时都做了什么, Zend/zend_hash.c static const Bucket *uninitializ ...

  10. sqlserver检测死锁;杀死锁和进程;查看锁信息

    http://blog.sina.com.cn/s/blog_9dcdd2020101nf4v.html sqlserver检测死锁;杀死锁和进程;查看锁信息 ( ::)转载▼ 标签: sql 检测死 ...