jQuery - 动态创建iframe并加载页面
<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并加载页面的更多相关文章
- ExtJs非Iframe框架加载页面实现
在用Ext开发App应用时,一般的框架都是左边为菜单栏,中间为tab页方式的显示区域.而tab页面大多采用的嵌入一个iframe来显示内容.但是采用iframe方式有一个很大的弊端就是每次在加载一个新 ...
- 关于IE8中使用Jquery load方法无法正常加载页面
最近发现,在IE8中使用Jquery load方法时无法正常加载页面,页面显示空白,没有加载.调试发现,页面多了一个</div>标签,但在FF和CH下表现正常.希望能给遇到同样问题的码农有 ...
- jQuery load() 判断 iframe 是否加载完毕
判断 iframe 是否加载完毕 方法.jQuery load() var frm = document.getElementById('myiframe'); $(frm).load(functi ...
- jquery中的load方法加载页面无法缓存问题
在A页面中调用JQuery中的load方法,加载另一个B页面,B页面中的样式文件和JS文件无法从浏览器缓存中获取,每次都是实时获取.这是因为B页面的HTML经load方法处理后,会为每个样式和JS文件 ...
- javascript动态创建script标签,加载完成后调用回调
代码如下: var head = document.getElementsByTagName('head')[0]; var script = document.createElement('scri ...
- jquery load(URL,FUNCTION(){}) 异步加载页面
$("#btnSearch").click(function () { var queryUrl = '/Report/LoadInsClassifFileNew'; if ($( ...
- 解决pjax加载页面不执行js插件的问题
个人博客 地址:http://www.wenhaofan.com/article/20180913220425 介绍 在使用jquery.pjax的时候发现加载页面时不会执行其中的layui以及jqu ...
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
- 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题
一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根 ...
随机推荐
- 理解Docker单机容器网络
在” 理解Docker单机容器网络 “一文中,还有一个Docker容器网络的功能尚未提及,那就是Docker容器的端口映射.即将容器的服务端口P’ 绑定到宿主机的端口P上,最终达到一种效果:外部程序通 ...
- linux安装ftp组件
1 安装vsftpd组件 linux系统安装完后,有/etc/vsftpd/vsftpd.conf 文件,是vsftp的配置文件. [root@bogon ~]# yum -y install v ...
- java常用集合详解 contains
java集合是对常用数据集合的封装,差不多就是数组吧,验证某个元素是否在数据集合里,最原始的方法是,用个循环,"某个元素"与数据集合中的每个元素逐个进行比较. java 对常用的一 ...
- 【原】flux学习笔记
最近React(web/native)依旧如火如荼,相信大家都跃跃欲试,入职新公司,现在的团队也开始在React领域有所尝试. 2016年应该是React 逐渐走向成熟的一年.之前在原来公司搞不懂的问 ...
- uC/OS-II内存(OS_mem)块
/*************************************************************************************************** ...
- cocos2d 2.2.6 win7下的配置
我搭建cocos2.6的开发环境需要安装工具包括: 1.Visual Studio 2012(由于不兼容win7,需要安装Update 4)和虚拟光驱daemon tool,虚拟光驱的下载地址:htt ...
- JavaWeb学习笔记——jsp基础语法
1.JSP注释 显式注释 <!-- 注释内容 --> 隐式注释,隐式注释在客户端无法看见 // /* */ <% 注释内容 %> 2.Scriptlet(小脚本程序) 所有嵌入 ...
- Python capitalize()方法
Python capitalize()方法 capitalize()方法返回字符串的一个副本,只有它的第一个字母大写.对于8位的字符串,这个方法与语言环境相关. 语法 以下是capitalize()方 ...
- throw er; // Unhandled 'error' event
events.js:72 throw er; // Unhandled 'error' event ^Error: listen EADDRINUSE at errnoException (net.j ...
- asp.net常用函数表
文章转载于[IT花园]:http://www.itgarden.com.cn/showtopic-29.aspx Abs(number) 取得数值的绝对值. Asc(String) 取得字符串表达式的 ...