iframe 子窗体和外部窗体的一些特性

最新推荐文章于 2025-06-08 00:03:24 发布

原创最新推荐文章于 2025-06-08 00:03:24 发布 · 704 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#iframe

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了iframe的一些关键特性，包括window.frameElement、window.parent以及window.frames的使用。详细讲解了父子窗体间的变量共享机制，指出子窗体可以访问父窗体的全局变量但不能直接操作DOM，而父窗体无法直接获取子窗体的变量。同时，文章探讨了iframe中cookie的共享机制，说明了父类和子类如何相互访问对方的cookie。最后，提到了在子窗体中获取iframe属性的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、iframe的一些特性：

（1）window.frameElement 返回嵌入当前window对象的元素(比如 <iframe> 或者 <object>),如果当前window对象已经是顶层窗口,则返回null。

（2）window.frameElement.contentWindow 能够返回iframe的文档,子页面的iframe。根据子页面的id,name等属性获取

如 getElementByid("childIframe").contentWindow.sayHello() 就调用了子页面的hello方法。浏览器为了安全原因，不允许网页去访问frame包内的子网页的dom内容的,只能调用方法，或则获取变量。

例如：外窗体 out.html

<body>
		<div id="pare">hello hava</div>
		<div class="myFrame"><span>业务一</span><iframe src="a.html"></iframe></div>
		<div class="myFrame"><span>业务二</span><iframe src="b.html"></iframe></div>
		<script type="text/javascript">
			window.aa = 5678;
			console.info(window.frameElement);
			console.info(window.frameElement.contentWindow);
		</script>
	</body>

里面两个iframe: a.html

<body>
		<script type="text/javascript">
			console.info(window.frameElement);
			console.info(window.frameElement.contentWindow);
		</script>
		<div></div>
	</body>

在上面代码中可以看到，外层的out.html中frameElement 对象返回null,则自由iframe中元素有此属性。a.html中

frameElement 返回了：

frameElement.contentWindow

frameElement 返回元素内容，frameElement.contentWindow返回对象，可以直接当做对象使用。

（3）window.parent 返回对象的父窗体，如果当前对象是顶层窗体 window.parent=window

( 4 ) window.frames 返回当前窗口的所有子框架元素,可以通过遍历获取当前文档下的所有iframe,也可以通过

var iframes = document.getElementsByTagName("iframe"); 查找所有的iframe遍历

2、父子窗体之间的变量的共享机制：

（1）、子类可以获取父类的全局变量,通过window.parent.变量名,也可以获取全局方法。

（2）、子类不能直接获取获取父类的dom元素 window.parent.getElementById('id'),此方法获取不到参数

（2）、父类不能直接获取子类的全局变量 window.frames[0] 获取不到子类的变量

3、父子窗体之间cookie共享机制：

（1）、父类的cookie子类是否可以获取：父类可以获取子类存储的cookie。

（2）、子类的cookie父类是否可以获取：子类可以获取父类存储的cookie。

4、在子窗体里面获取当前iframe的属性

在父窗体中有如下语句：

<iframe src="i_2_frame.html"  name="son"  itemTitle="sonattr"> </iframe>

//子窗体中写如下js可以获取到son  sonattr等自定义的属性

	    $(window.parent.document).find("iframe").each(function(){				
	   		 console.info($(this).attr("name"));
	   		 console.info($(this).attr("itemTitle"));  
         });

欢迎留言交流