关于iframe的内外访问的问题

最新推荐文章于 2025-04-27 09:22:00 发布

Light rattle

最新推荐文章于 2025-04-27 09:22:00 发布

阅读量886

点赞数

文章标签： javascript html 前端

本文链接：https://blog.youkuaiyun.com/weixin_47278656/article/details/129896831

版权

当iframe加载的页面使用#document时，外部无法直接选择内部元素。可以通过iframe[num].contentWindow.document找到内部元素。而在#document内部，通常用window.parent或window.top访问外部，但在#document下可能返回undefined。

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

关于iframe的内外访问的问题

一、问题描述
二、解决办法
- 1.在iframe外部选择#document内部的元素：
- 2.在#document内部选择到iframe外部（待解决）

一、问题描述

当设计一个程序，前端的页面结构有多个iframe，且iframe内部是用的‘#document’来加载内部的页面时，关于iframe的内外部访问就会由于这个‘#document’而出现问题：
①在iframe外部无法选择到#document内部的元素；
②在#document内部无法选择到iframe外部（因为#document隔开了）。

二、解决办法

1.在iframe外部选择#document内部的元素：

如结构这样的文件( 为#document内部的元素)：

<iframe>
	#document
		<html>
		</html>
</iframe>
<iframe>
	#document
		<html>
		</html>
</iframe>
<iframe>
	#document
		<html>
		</html>
</iframe>

假设当前选择器top为iframe外部的某元素，可以使用：

top.getListiframe()[num].contentWindow.document.find('html');

此时这个选择器选中的就是某个#document内部的html.

2.在#document内部选择到iframe外部（待解决）

如果是已经在#document内部的中时，此时是iframe内部，这个时候可以像众多解决方案中所述的：

在 iframe 内部使用 window.parent 来访问包含它的父级窗口；
使用 window.top 来访问整个窗口层次结构的最顶层窗口。

这样是可以解决问题的，但当外面包了一个#document后，结构成为这样：

<iframe>
	#document
		<html>
			<div>
			</div>
		</html>
</iframe>

这个时候在HTML中使用这个window.parent就没办法了（会返回undefined）。