<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. ES6之let（理解闭包）和const命令

    ES6之let(理解闭包)和const命令 最近做项目的过程中,使用到了ES6,因为之前很少接触,所以使用起来还不够熟悉.因此购买了阮一峰老师的ES6标准入门,在此感谢阮一峰老师的著作. 我们知道,E ...

  2. php删除指定目录所有文件

    <?php /** * 删除指定文件目录下的所有文件 * @param str $dir 指定文件路径: 如:K:/wamp/www/test * return boole *--------- ...

  3. 手写控件，frame，center和bounds属性

    一.手写控件 1.手写控件的步骤 (1)使用相应的控件类创建控件对象 (2)设置该控件的各种属性 (3)添加控件到视图中 (4)如果是button等控件,还需考虑控件的单击事件等 (5)注意:View ...

  4. centos搭建 nginx一直报错 file not found.

    百度了半天找到别人的解决办法 记录下 摘要: file not found. nginx php 这个问题是你配置文件的问题: 查看就是了不要管 nginx 如何开启解析 PHP 的功能? # 成功安 ...

  5. JavaWeb学习笔记——第一个JSP文件

    必须加上第一句以用来指定编码,否则会出现乱码 <%@ page language="java" import="java.util.*" contentT ...

  6. header的安全配置指南

    0x00 背景 在统计了Alexa top 100万网站的header安全分析之后(2012年11月 - 2013年3月 - 2013年11月),我们发现其实如何正确的设置一个header并不是一件容 ...

  7. HDU 1326 Box of Bricks（水~平均高度求最少移动砖）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1326 题目大意: 给n堵墙,每个墙的高度不同,求最少移动多少块转使得墙的的高度相同. 解题思路: 找到 ...

  8. Multiple sequence alignment Benchmark Data set

    Multiple sequence alignment Benchmark Data set 1. 汇总: 序列比对标准数据集: http://www.drive5.com/bench/ This i ...

  9. GoLang之方法与接口

    GoLang之方法与接口 Go语言没有沿袭传统面向对象编程中的诸多概念,比如继承.虚函数.构造函数和析构函数.隐藏的this指针等. 方法 Go 语言中同时有函数和方法.方法就是一个包含了接受者的函数 ...

  10. 百度文件上传webuploader上传文件，含文件大小、类型验证

    你的上传初始化文件upload_XXX.js中:(见红色字) // 初始化Web Uploader var allMaxSize = 10; var uploader = WebUploader.cr ...