javascript window获取iframe、iframe获取window、document

转载已于 2022-05-27 12:40:08 修改 · 7.1k 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/wangjun5159/article/details/78647615

文章标签：

#javascript #开发语言 #ecmascript

于 2019-05-25 13:31:21 首次发布

Js 专栏收录该内容

26 篇文章

订阅专栏

本文总结了日常开发中window与iframe相互获取的方法。介绍了通过window获取iframe，以及通过iframe获取window、document的方式，还提及window获取顶级窗口、父窗口的方法，同时给出导航栏回退和前进操作，最后附上参考链接。

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

前言

日常开发中，经常用到在window中获取某个iframe，或者在iframe中获取当前window。这里做个总结，记在心里后，就不用每次都百度了。

iframe和iframe的关系

首先需要说明的是，w3c已经不推荐使用frame，而推荐使用iframe，iframe也就是inline frame（行内frame），顾名思义它具有css的行内框特性，正是因为这一特性才引出来iframe 高度100%时，出现垂直滚动条

通过window获取iframe

window.frames是个伪数组，可以通过window.frames[index]或window.frames[name]来获取iframe
window.frames[index],索引是从左往右，从上往下的，从0开始，通常我们使用window.frames[name]来获取frame

通过iframe获取window、document

如果想获取iframe里的window或者document，可以使用
iframe.contentWindow、iframe.contentDocument

必须是同源才可以，否则contentDocument为null
iframe.contentDocument=iframe.contentWindow.document，不过iframe.contentDocument在IE8及以下的版本不支持。

window获取顶级窗口、父窗口

获取顶级窗口：window.top
获取父级窗口：window.parent
导航栏回退：history.back(); 注意回退的请求，会有缓存。
前进：history.forward()
history.back()和history.forward()仅仅是为了方便分别代替history.go(-1)和history.go(1)

参考

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
---------------------
作者：干净的句号
来源：优快云
原文：https://blog.youkuaiyun.com/wangjun5159/article/details/78647615