<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. linux快速安装lamp环境

    我折腾过不少的lamp安装方式,lnmp也折腾过.不过因为windows下面apache用的比较多,各种配置也比较熟悉,因此最终还是选择了lamp这个架构. 由于是自己装虚拟机玩,所以各种安全措施都没 ...

  2. C语言函数指针的用法

    函数指针是一种在C.C++.D语言.其他类 C 语言和Fortran 2003中的指针.函数指针可以像一般函数一样,用于调用函数.传递参数.在如 C 这样的语言中,通过提供一个简单的选取.执行函数的方 ...

  3. CF724C: Ray Tracing

    传送门 CF的题质量真心不低,这道题的标准解法(应该)是exgcd,打比赛的时候想到了具体的推导公式了,也意识到了需要用exgcd,但是因为寝室要锁门了(其实就是太弱,就放弃了. 首先很显然,这条线所 ...

  4. UVA5135 Mining Your Own Business ( 无向图双连通分量）

    题目链接 题意:n条隧道由一些点连接而成,其中每条隧道链接两个连接点.任意两个连接点之间最多只有一条隧道.任务就是在这些连接点中,安装尽量少的太平井和逃生装置,使得不管哪个连接点倒塌,工人都能从其他太 ...

  5. 深入理解JavaScript中创建对象模式的演变（原型）

    深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...

  6. angular $emit发送 后退时$on多次接收

    angular 并列作用域,作用域不存在上下级关系,$scope.$emit发送时 后退时$rootScope.$on会出现接收多个消息的情况 $rootScope.$on('saveDraft', ...

  7. Java数据结构的特点

  8. BigInteger类

    当一个数字非常大时,则肯定无法使用基本类型接受,所以使用了BigInteger类. BigInteger类表示是大整数类,定义在java.math包中,如果在操作时一个整型数据已经超过了整数的最大类型 ...

  9. MySQL学习笔记——安装及配置环境

    1.安装的版本为mysql-5.6.24-win32.1432006610压缩版 查看教程http://jingyan.baidu.com/article/f3ad7d0ffc061a09c3345b ...

  10. Jquerymobile随笔

    fixed <div data-role="header" data-position="fixed"> <h1>欢迎访问我的主页< ...