iframe使用总结（实战）

最新推荐文章于 2024-02-28 13:15:44 发布
最新推荐文章于 2024-02-28 13:15:44 发布
阅读量9.8w 收藏 204
点赞数 41
分类专栏： 前端之Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuew1987/article/details/11265153
版权

说在前面的话，iframe是可以做很多事情的。
例如：
a>通过iframe实现跨域;
b>使用iframe解决IE6下select遮挡不住的问题
c>通过iframe解决Ajax的前进后退问题
d>通过iframe实现异步上传。(Easyui中form组件就是用的iframe，实现表单提交时，可以提交上传域)
下面就一些问题一一论述。

1、iframe基本知识：

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。
提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。
<iframe width=420 height=330 frameborder=0 scrolling=auto src="URL"></iframe>

可选属性：

标准属性：

 

2、操作iframe：

   注：测试环境IE：8.0，FF：23.0.1
   a>隐藏iframe表框
		i>标签中设置：frameborder="0",<iframe frameborder="0" width="400" height="400" src="http://blog.csdn.net/cuew1987" scrolling="no"></iframe>
		ii>DOM操作：
			<body>
			<iframe frameborder="1" width="400" height="400" src="http://blog.csdn.net/cuew1987" scrolling="no" id="myiframe"></iframe>
			<script>
			var myiframe = document.getElementById("myiframe");
			myiframe.style.border="none";//FF下有效，IE下无效 
			myiframe.setAttribute("frameborder",0);//FF下有效，IE下无效 
			myiframe.frameBorder = 0;//FF下有效，IE下无效 
			</script>
			</body>
   b>动态创建iframe
   <script>
		var newFrame = document.createElement("iframe");
		newFrame.src ="http://blog.csdn.net/cuew1987";
		newFrame.frameBorder = 0;//FF、IE隐藏边框有效
		newFrame.width = "400px";
		newFrame.height = "400px";
		newFrame.scrolling = "no";
		document.body.appendChild(newFrame);
   </script>
   c>获取iframe
		i>var obj = document.getElementById("iframeID");
		  获取iframe对象，可直接操作iframe标签属性,如只想改变iframe的 src 或者 border ，scrolling 等attributes
		ii>var dom = frames["iframeName"];
		   获取iframe的DOM对象，此对象可用来操作对象，比如想操作iframe页面中的元素。
    d>获取iframe中的window对象
		function getIframeWindow(obj) {
			//IE || w3c
			return obj.contentWindow || obj.contentDocument.parentWindow;
			//parentWindow 是 parent window object
		}
		document.getElementById取到的iframe是不能直接操作里面的document的，只能这样取：
		IE:frames[id].document或obj.contentWindow.document;
		FF:dom.contentDocument或obj.contentDocument;不绑定任何事件.
	e>获取iframe页面高度
		function getIframeHeight(obj){
			var idoc = getIframeWindow(obj).document; 
			if(idoc.body){
				return Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight);   
			}else if(idoc.documentElement){
				return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);   
			}
		}
	f>父子页面互访
		i>子访问父：
			parent.html:
			<body>
				<div>等到的信息：<div id="msg"></div></div>
				<iframe frameborder="1" width="400" height="400" src="son.html" scrolling="no" id="myiframe"></iframe>
			</body>
			son.html:
			<body>
			<input type="button" onClick="setMsg()" value="setMsg">
			<script>
			function setMsg(){
				var msg = window.parent.document.getElementById("msg");
				msg.innerHTML= "Hello world!!";
			}
			</script>
			</body>
		ii>父访问子：
			parent.html:
			<body>
			<div>等到的信息：<div id="setMsg"></div></div>
			<input type="button" value="setMsg" onClick="setMsg()"><br>
			<iframe frameborder="1" width="400" height="400" src="son.html" scrolling="no" id="myiframe"></iframe>
			<script type="text/javascript">
			function setMsg(){
				var obj = document.getElementById("myiframe");
				var msg = getIframeWindow(obj).document.getElementById("msg");
				document.getElementById("setMsg").innerHTML = msg.innerHTML;
			}
			</script>
			</body>
			son.html:
			<body>
			<div id="msg">Hello world!!!</div>
			</body>


3.iframe高度自适应和跨域：

实际使用iframe中，会遇到iframe高度的问题，由于被嵌套的页面长度不固定而显示出来的滚动条，不仅影响美观，还会对用户操作带来不便
	a>同域下的高度自适应
	parent.html:
	<body>
	<iframe width="400" id="myiframe" οnlοad="setHeight()" height="1" frameborder="0" src="son.html"></iframe>
	<script type="text/javascript">  
	function getIframeWindow(obj) {
		return obj.contentWindow || obj.contentDocument.parentWindow;
	}
	function getIframeHeight(obj){
		var idoc = getIframeWindow(obj).document; 
		if(idoc.body){
			return Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight);   
		}else if(idoc.documentElement){
			return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);   
		}
	}
	function setHeight(){   
		var myiframe = document.getElementById("myiframe");
		myiframe.height = getIframeHeight(myiframe);
	} 
	</script> 
	</body>
	另：document.documentElement与document.body相关说明(W3C DOM2.0规范)
	document.doucmentElement:
		documentElement of type Element, readonly,This is a convenience attribute that allows direct access to the 
		child node that is the root element of the document. For HTML documents, this is the element with the tagName "HTML".
	document.body:
		document.body is the element that contains the content for the document. In documents with <body> contents, returns the <body> element, 
		and in frameset documents, this returns the outermost <frameset> element.
		Though body is settable, setting a new body on a document will effectively remove all the current children of the existing <body> element.
	IE在怪异模型（Quicks Mode）下document.documentElement无法正确取到clietHeight scrollHeight等值，比如clientHeight=0。
	获取scrollTop:
	var sTop=Math.max(
		(document.body?document.body.scrollTop:0),
		(document.documentElement?document.documentElement.scrollTop:0),
		(window.pageYOffset?window.pageYOffset:0)
	);    

	b>跨域下高度自适应
	页面：
	index.html:(http://www.csdn.net)
	<iframe width="400" id="myiframe" οnlοad="setHeight()" height="1" frameborder="0" src="son.html"></iframe>
	son.html:
	<body >
	<iframe id="agentIframe" style="position:absolute; top:-10000;left:-1000;" height="10" width="100%"></iframe>
	</body>
	<script>
		function getHeight(){
			var idoc = document; 
			if(idoc.body){
				return Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight);   
			}else if(idoc.documentElement){
				return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);   
			}
		}
		window.onload = function(){
			var h = getHeight();
			document.getElementById("agentIframe").src="http://www.csdn.net#"+h;
		}
	</script>
	agent.html:(http://www.csdn.net)
	<script>
	(function(){
		var con = parent.parent.document.getElementById('frame_content');     
		var href = parent.parent.frames["frame_content"].frames["iframeC"].location.hash;      
		con.style.height = href.split("#")[1]+"px";
	})();
	</script>

4.iframe背景透明：

在ie6/7/8下引入iframe的时候，它的背景默认是白色，即使设置了style=”background-color:transparent;”也无效，
但是其他浏览器(firefox,chrome,opera,ie9)都正常显示，要解决这个兼容性问题，必须用到一个属性。
下面来看看现象：

index.html:
<body style="background-color:#00f;">
<iframe frameborder="0" height="200" width="200"  src="son.html" scrolling="yes" id="myiframe" 
style="background-color:transparent;"></iframe>
</body>


结果如下图：(FF中有滚动条是因为在index.html中设置了有滚动条)

解决：
给iframe设置属性：allowTransparency=”true” //设置为true允许透明

<body style="background-color:#00f;">
<iframe allowTransparency="true" frameborder="0" height="200" width="200"  src="son.html" 
scrolling="yes" id="myiframe"></iframe>
</body>


备注：iframe不设置此属性时，可使用iframe解决在IE6、7环境中遮住select

5.判断页面中是否有iframe:

	a>首先来看看window.frameElement这个属性。
		返回嵌入当前window对象的元素(比如 <iframe> 或者 <object>),即为包含本页面的iframe或frame对象。如果当前window对象已经是顶层窗口,则返回null.
		看看一个例子：
		parent.html:
		<body>
		<iframe frameborder="1" width="400" height="400" src="son.html" scrolling="no" id="myiframe"></iframe>
		</body>
		son.html:(注意frameElement用在son.html中，如果用在parent.html中,则返回null)
		<body>
		<div id="msg">Hello world!!!</div>
		<script type="text/javascript">
			var iframe = window.frameElement;
			if(iframe){
				iframe.src = "http://blog.csdn.net/cuew1987";
			}
		</script>
		</body>
		备注：虽然该属性名为frameElement,但该属性也会返回其他类型比如 <object> 或者其他可嵌入窗口的元素.
	b>兼容性如下图：


	c>定义函数：
		i>判断父页面中是否含有iframe
		function hasIframe(){
			return document.getElementsByTagName("iframe").length > 0;
		}
		ii>判断某个页面是否在iframe标签中
		function innerIframe(){
			var iframe = window.frameElement;
			if(iframe){
				return typeof iframe !== "undefined";
			}
		}

6、HTML5中iframe：

HTML 4.01 与 HTML 5 之间的差异在 HTML 5 中，仅仅支持 src 属性
<iframe src="/index.html"></iframe>
HTML5中全局属性：

7、easyui中form组件提交(包括上传域)：

	function submitForm(target, options) {
		options = options || {};
		if (options.onSubmit) {
			if (options.onSubmit.call(target) == false) {
				return;
			}
		}
		var form = $(target);
		if (options.url) {
			form.attr("action", options.url);
		}
		var frameId = "easyui_frame_" + (new Date().getTime());
		var frame = $("<iframe id=" + frameId + " name=" + frameId + "></iframe>").attr(
				"src",
				window.ActiveXObject ? "javascript:false" : "about:blank").css(
				{
					position : "absolute",
					top : -1000,
					left : -1000
				});
		var t = form.attr("target"), a = form.attr("action");
		form.attr("target", frameId);//在iframe中提交表单
		try {
			frame.appendTo("body");
			frame.bind("load", cb);
			form[0].submit();
		} finally {
			form.attr("action", a);
			t ? form.attr("target", t) : form.removeAttr("target");
		}
		var checkCount = 10;
		function cb() {
			frame.unbind();
			var body = $("#" + frameId).contents().find("body");
			//contents()查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容
			var data = body.html();
			if (data == "") {
				if (--checkCount) {
					setTimeout(cb, 100);
					return;
				}
				return;
			}
			var ta = body.find(">textarea");
			if (ta.length) {
				data = ta.val();
			} else {
				var pre = body.find(">pre");
				if (pre.length) {
					data = pre.html();
				}
			}
			if (options.success) {
				options.success(data);
			}
			setTimeout(function() {
				frame.unbind();
				frame.remove();
			}, 100);
		};
	};
	另：form 的target属性：
	a>HTML4中：
	定义和用法：target 属性规定在何处打开 action URL。
	兼容性：在 HTML 4.01 中，不赞成使用 form 元素的 target 属性；在 XHTML 1.0 Strict DTD 中，不支持该属性。
	属性值：
	_blank 新窗口中打开
	_self  默认，在相同的框架中打开
	_parent 父框架中打开
	_top    整个窗口中打开
	framename  指定的frame name属性值的框架中打开

	b>HTML5中：
	HTML 4.01 与 HTML 5 之间的差异
	在 HTML5 中 target 属性不再是被废弃的属性。不再支持 frame 和 frameset。
	现在，parent, top 和 framename 值大多用于 iframe。

8、网上问题收集：

a>window.frameElement在chrome下undefined?

问题描述：
今天在重新编写我的日历组件的时候，由于用到使用iframe自定义属性传值，
将父页面的值写在iframe 自定义属性上，然后在iframe页面中使用 window.frameElement.getAttribute() 获取，
奇怪的是之前编写的日历控件代码一直都这样写，没有发生过错误，但是今天在chrome里面 window.frameElement 竟然是 undefined，
在firefox 甚至IE6下都没有问题，后来百度没有答案， 再google 也，没有答案。
解决：
最后自己根据以往经验想到或许是本地调试权限问题，于是打开apache使用域名的形式访问，果然可以了，呵呵！

 

问题收集持续更新。。。

 

说在最后的话：此文中许多都是前辈们的经验，在此做一总结，丰富自我的同时，以备需要之人参考，如果你是大神，请飘过，文中有不当之处，还望各位不要手下留情，不吝赐教，感激不尽！

今天上午打开微博的第一条消息就是博友转发的李开复：“世事无常，生命有限。原来，在癌症面前，人人平等。”，已身患淋巴癌，在这里希望李开复老师能早日康复！经过几个晚上的努力，此篇文章终于写完，生命不息，奋斗不止！

201309062026新浪微博李开复：“在以往的职业生涯里，我一直笃信“付出总有回报”的信念，所以给自己的负荷一直比较重，甚至坚持每天努力挤出三小时时间工作，还曾天真的和人比赛“谁的睡眠更少”、“谁能在凌晨里及时回复邮件”……努力把“拼命”作为自己的一个标签。现在，冷静下来反思：这种以健康为代价的坚持，不一定是对的。”

我想这就是所谓的人生价值吧。祈福！

BJ_benjamin
关注
  • 41
    点赞
  • 踩
  • 204
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
怎样在页面显示 "正在加载中...."
小虫乱爬--爬爬也论技术 博客
07-26 1万+
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档数据加载中.....var http_request = false;function send_request(url) {                http_request = false;    
jwt:使用jwks端点的JWT验证程序
05-15
智威汤逊 另一个jwt验证程序...。我只是找不到与jwks_uris一起使用的验证程序。
iframe 的使用理解
i_Satan的博客
04-19 3821
frame 用于在页面内显示页面，使用 iframe 会创建包含另外一个文档的内联框架（即行内框架）
获取iframe弹出层window对象
java_csdnn的博客
02-28 279
弹出层 window 对象获取方式更新
【HTML】深入全掌握 iframe：了解 its 技术原理、优缺点、最佳应用场景及实战指南
weixin_55846296的博客
06-08 2507
Web 应用开发中，包含其他网页的框架是很常见的需求。HTML 标签iframe提供了一个容器，可以用来嵌入其他页面，并且它自带了一些有用的特性，如调整大小、滚动等。本文将深入介绍iframe技术原理、优缺点、最佳应用场景及实战指南，希望能帮助您更好地运用 iframe，提升 Web 应用开发效率。（内嵌框架）元素是一种HTML常用元素，用于在一个HTML文档中嵌入另一个HTML文档。其实际效果是将一个文档嵌入到另一个文档中，用户在浏览器中正常浏览父文档的同时，可以看到和与子文档交互。
koa中生成jwk令牌
weixin_43756060的博客
08-17 1万+
执行npm i jsonwebtoken --save 安装第三方库 在util.js中引用，并添加token生成函数 在config.js中添加全局变量 security:{ secretKey: 'pdooawjjypomqynn', expiresIn: 60*60 // 令牌的过期时间 } util.js const jwt = require('jsonwebt...
iframe的基本介绍与使用
qq_45799465的博客
03-31 3万+
一、iframe的基本介绍 二、iframe的基本使用 三、iframe的属性介绍 四、iframe注意事项 五、iframe的URL传参方法 六、iframe的postMessage（）传参方法
iframe使用
weixin_43842373的博客
03-31 8943
文章目录iframe的常用属性iframe 的常见使用方式一、获取 window 对象父页面获取子页面的window对象子页面获取父页面的window对象二、父子页面之间的传值方式通过 postMessage 进行通信通过本地存储进行通信通过 url 进行通信 iframe的常用属性 属性 说明 name 规定 frame 的名称 width 设置 frame 的宽度 height 设置 frame 的高度 src 设置在 frame 中显示的页面 frameborder 是
iframe标签的使用
weixin_44767973的博客
12-07 2万+
iframe标签支持 HTML 中的全局属性： iframe标签支持 HTML 中的事件属性：如Window 事件属性、Form 事件、Keyboard 事件、Mouse 事件、Media 事件等 iframe常用的元素属性：IFrame 对象代表 HTML iframe 元素。可使用 getElementById() 来访问 iframe 元素。如： var iframe = document.getElementById(“iframe”); var iwindow = iframe.cont
C:函数指针
jsjgogogo的博客
03-19 1万+
函数指针的定义 typedef int (*compare_ptr)(int,int);// so there is a Type named compare_ptr int max(int x,int y) { return x>y ? x:y; } //!函数指针的定义 //? return-type (* func_ptr) (type1,type2...) printf("max of 1,2,3=%d\n",max(max(1,3),3)); in.
HTML iframe 用法总结收藏
09-28
iframe是框架的一种形式，也比较常用到。
iframe的使用用法
10-31
iframe的使用用法
使用iframe的案例
01-29
使用iframe的案例
iframe使用post数据方式显示
最新发布
03-04
ajax使用post请求返回页面,直接将返回的页面数据放入iframe标签中,具体实现不在此讨论，本文实现form表单,利用form表单的post请求方式实现提交数据加载iframe
JNI一文详解
说码解字
09-01 2万+
1. 准备工作 Ubuntu更换阿里云软件源 在Ubuntu上安装gcc和g++ 在Ubuntu上安装OpenJDK sudo apt install default—jdk 设置JAVA_HOME环境变量：找到OpenJDK的安装路径（e.g. /usr/lib/jvm/java—11—openjdk—amd64） sudo vim /etc/profile 在文件末尾添加 export JAVA_HOME=/usr/lib/jvm/java—11—openjdk—amd64 export
java中使用JWK格式传输密钥(密钥对象和jwk对象相互转换)
qq_41132384的博客
06-28 8864
java使用jwk传输密钥,jwk对象与rsa对象互转
利用iframe实现局部打印(区域打印)
m0_52724742的博客
08-16 2541
区域打印
vue中实现打印通过iframe标签实现
qq_43631129的博客
07-02 3275
vue 打印，iframe实现打印，打印可横向打印，纵向打印
JWK和JWKs的格式
热门推荐
JosephThatwho的博客
03-16 9万+
JWK，全称JSON Web Key，是一个JSON对象，表示一个加密的密钥。JWK中的字段表示密钥的属性。 JWK中的参数 “kty”（key type） 表示密钥使用的加密算法，比如“RSA”或者“EC”等，是大小写敏感的字符串。JWK中必须携带这个字段。 “use”（Public Key Use） 表示公钥的使用目的。指示公钥是用于加密数据还是用于验证数据上的签名。可以是如下值： “sig”（signature） “enc”（encryption） 大小写敏感。可以选择性携带。 “key_
iframe使用方法
08-17
iframe是HTML中的一个标签，用于在网页中嵌入另一个网页或者其他类型的文档。使用iframe可以在当前页面中显示独立的内容，类似于在页面中创建一个小的浏览器窗口。 要使用iframe，你需要在HTML中使用以下代码： ```html <iframe src="URL" width="宽度" height="高度"></iframe> ``` 其中，src属性指定要嵌入的网页的URL，width和height属性分别指定iframe的宽度和高度。你可以根据需要调整这些属性的值。 下面是一个示例： ```html <!DOCTYPE html> <html> <head> <title>嵌入页面示例</title> </head> <body> <h1>欢迎访问我的网页</h1> <p>下面是一个嵌入的页面：</p> <iframe src="https://www.example.com" width="600" height="400"></iframe> </body> </html> ``` 在上面的示例中，我们将https://www.example.com这个网页嵌入到当前页面中，iframe的宽度为600像素，高度为400像素。 需要注意的是，由于安全性原因，某些网站可能不允许被嵌入到其他网页中。因此，在使用iframe时，请确保你有权限嵌入该网页或者文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值