1. <html>
  2. <head>
  3. <script language="JavaScript" src="jquery-1.11.1.min.js" type="text/javascript"></script>
  4. <script language="JavaScript" type="text/JavaScript">
  5. /**
  6. 弹出iframe页面(iframe后面会添加灰色蒙版)
  7. **/
  8. function showIframe(url,w,h){
  9.     //添加iframe
  10.     var if_w = w;
  11.     var if_h = h;
  12.     //allowTransparency='true' 设置背景透明
  13.     $("<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');
  14.     var st=document.documentElement.scrollTop|| document.body.scrollTop;//滚动条距顶部的距离
  15.     var sl=document.documentElement.scrollLeft|| document.body.scrollLeft;//滚动条距左边的距离
  16.     var ch=document.documentElement.clientHeight;//屏幕的高度
  17.     var cw=document.documentElement.clientWidth;//屏幕的宽度
  18.     var objH=$("#YuFrame1").height();//浮动对象的高度
  19.     var objW=$("#YuFrame1").width();//浮动对象的宽度
  20.     var objT=Number(st)+(Number(ch)-Number(objH))/2;
  21.     var objL=Number(sl)+(Number(cw)-Number(objW))/2;
  22.     $("#YuFrame1").css('left',objL);
  23.     $("#YuFrame1").css('top',objT);
  24.  
  25.     $("#YuFrame1").attr("src", url)
  26.  
  27.     //添加背景遮罩
  28.     $("<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');
  29.     var bgWidth = Math.max($("body").width(),cw);
  30.     var bgHeight = Math.max($("body").height(),ch);
  31.     $("#YuFrame1Bg").css({width:bgWidth,height:bgHeight});
  32.  
  33.     //点击背景遮罩移除iframe和背景
  34.     $("#YuFrame1Bg").click(function() {
  35.         $("#YuFrame1").remove();
  36.         $("#YuFrame1Bg").remove();
  37.     });
  38. }
  39. </script>
  40. </head>
  41. <body>
  42. <input type="button" onClick="showIframe('http://hangge.com',460,280)" value="加载"/>
  43. </body>
  44. <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. Altium Designer 15 --- Make LOGO/ICON

    Line frame is created by Rhino(DXF file format)

  2. BZOJ3160: 万径人踪灭

    设a[i]=bool(s[i]=='a'),b[i]=bool(s[i]=='b'),考虑a和a.b和b的卷积,由于卷积是对称的,就可以统计出不连续回文子串个数了.可能说得比较简略.再用manache ...

  3. OC面向对象特性： 继承

    基础知识 1.标识符是有字母,数字,下划线组成的. 2.首字母只能是字母,下划线,不能为数字. 3.标识符要做到见名之意. 4.标识符不能使用已定义的关键字和预定义标识符. 继承 继承:子类可以直接访 ...

  4. mvc-1

  5. C# vs C++ Performance

    http://www.codeproject.com/Articles/212856/Head-to-head-benchmark-Csharp-vs-NET

  6. gl_ClipDistance

    http://github.prideout.net/clip-planes/ http://www.opengl.org/wiki/Built-in_Variable_(GLSL) http://w ...

  7. jquery左边滚动，完毕后跳转回来

    代码如下 function in_scroll(){ $liW = ; $num = $(".in-cy li").size(); $ulW = $liW*$num; $(&quo ...

  8. git push.default is unset

    warning: push.default is unset; its implicit value is changing inGit 2.0 from 'matching' to 'simple' ...

  9. Java调试

    线上load高的问题排查步骤是: 先用top找到耗资源的进程 ps+grep找到对应的java进程/线程 jstack分析哪些线程阻塞了,阻塞在哪里 jstat看看FullGC频率 jmap看看有没有 ...

  10. [C#]如何使用ThreadPool

    摘要 线程池是一种多线程的形式,其中的任务被添加到队列中,并在创建线程时自动启动. 以下示例使用.Net框架的线程池来计算十个数字20和40之间的裴波那契的结果.裴波那契Fibonacci类,它提供了 ...