关于iframe窗口调用父级或同级的元素

最新推荐文章于 2023-06-08 17:05:08 发布

wuyichang919

最新推荐文章于 2023-06-08 17:05:08 发布

阅读量836

点赞数

CC 4.0 BY-SA版权

分类专栏：前段ui 技术类文章标签：前端子级父级 iframe html

本文链接：https://blog.youkuaiyun.com/wuyichang919/article/details/93209610

前段ui 同时被 2 个专栏收录

5 篇文章

订阅专栏

技术类

3 篇文章

订阅专栏

博客介绍了在前端开发中，子级页面获取同级页面其他iframe的相关内容，还说明了在子级页面获取父级的方式，如使用parent获取父级，通过parent.value、parent.getValue获取变量和方法，用parent.document获取dom。

关于iframe窗口调用父级或同级的元素

- - - 在子级页面获取同级页面的其他iframe

<html>
...
<iframe id="id1">
<html>
	<head>
		<script type="text/javascript">
			var value='';
			function getValue(){
				return value;
			}
		</script>
	</head>
	<body>
		...
		...
	</body>
</html>
</iframe>
<iframe id="id2"></iframe>
<iframe id="id3"></iframe>
<iframe id="id4"></iframe>
...
</html>

在子级页面获取同级页面的其他iframe

//获取指定id的iframe
var iframe=$(parent.document).find('#id')[0];
//获取上iframe中的元素(假设在指定的iframe页面存在全局变量 value,也就是定义在JavaScript
//中的代码中定义的全局变量
var value=iframe.contentWindow.value;
//调用iframe中的全局方法 
iframe.contentWindow.getValue();