<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系统被入侵后处理经历

    服务器托管在外地机房. 突然,频繁收到一组服务器ping监控不可达邮件,赶紧登陆zabbix监控系统查看流量状况. 可见流量已经达到了800M左右,肯定不正常,马上尝试SSH登陆系统,不幸的事,这种情 ...

  2. 高性能JavaScript笔记三（编程实践）

    避免双重求值 有四个标准函数可以允许你传入代码的字符串,然后它才你动态执行.它们分别是:eval.Function.setTimeout.setInterval 事实上当你在javascript代码中 ...

  3. DIY(码表)制作实验

    代码: #include<reg52.h>typedef unsigned char u8;typedef unsigned int  u16;/********端口定义********* ...

  4. python学习笔记-（三）条件判断和循环

    1.条件判断语句 Python中条件选择语句的关键字为:if .elif .else这三个.其基本形式如下: age_of_cc = 27 age = int(input("guessage ...

  5. win7 中maven安装

    1. 下载Maven 下载地址为:http://maven.apache.org/download.html,现在最高的版本为3.0.2,在win7下载文件为:apache-maven-3.0.2-b ...

  6. crontab执行脚本中文乱码，手动执行没有问题

    crontab执行脚本中文乱码,手动执行没有问题 产生原因:       这是因为Unix/Linux下使用crontab时的运行环境已经不是用户环境了,因此原本用户下的一些环境变量的设置就失效了.例 ...

  7. re正则表达式7_{}

    curly brackets {} instead of one number, you can specify a range by writing a minimum,a comma,and a ...

  8. 【C++11】新特性——auto的使用

    [C++11]新特性——auto的使用 C++11中引入的auto主要有两种用途:自动类型推断和返回值占位.auto在C++98中的标识临时变量的语义,由于使用极少且多余,在C++11中已被删除.前后 ...

  9. css 常用代码解析

    .cBan_1 .e2-pro li a{ display: block; -webkit-transition: all 0.3s linear;transition: all 0.3s linea ...

  10. 使用.net Stopwatch class 来分析你的代码

    当我们在调试,优化我们的代码的时候,想知道某段代码的真正的执行时间,或者我们怀疑某段代码,或是某几段代码执行比较慢, 需要得到具体的某段代码的具体执行时间的时候.有一个很好用的类Stopwatch. ...