浅析iframe

iframe 提供了一种途径,让我们在一个页面中嵌入另一个页面。有些时候,我们希望两个窗口能够通信。每个窗口都有一个独立的 window 对象,窗口直接的相互通信就是通过 window 对象直接的相互引用来实现的。

重点在最后。

父窗口引用子窗口

frames 属性

父窗口中的 window 对象有一个 frames 的属性,通过它能够访问到其页面上的所有 iframe 的 window 对象。具体有两种方式:

window.frames[0]  // 通过下标为数字
window.frames['iframeName']  // 通过器 iframe 的 name 属性。

值得说明的是,通过数字访问时,其数字并不是对应文档中 iframe 的位置顺序,而应该是按照其生成 DOM 节点的时间顺序。例如,文档加载完成后,通过 JavaScript 的方式生成了一个 iframe 并注册成了 body 的第一个子节点,那么它对应 window 对象并不是 window.frames[0] , 而是 window.frames[window.frames.length - 1]

contentWindow 属性

通过 iframe 元素的 contentWindow 属性同样能够引用其 window 对象。

var iframe = document.getElementsByTagName('iframe')[0];
iframe.contentWindow;

子窗口引用父窗口

parent 属性
window.frames[0].parent === window;  // true

最顶层的 window 对象的 parent 属性就是自身。

window.parent === window; // true,如果该 window 对象处于最顶层
top 属性

top 属性可以直接访问到最外层的 window 对象。如果存在如下的 iframe 嵌套:

window.frames[0].frames[0].frames[0].top === window;// true

安全限制

安全限制才是 iframe 之间相互应用的重点。安全限制并不会限制 window 对象之间的相互访问,但是如果要访问引用 window 对象的属性(或方法)时,处于安全策略,会限制两个页面必须是同域名(端口可以不同)。

如果两个页不在同一个域名下,那么:

var w = window.frames[0]; // OK
 w.someMethod(); // 抛出一个错误

必须是同域名,意味着即使一个是另外一个子域也是不可以的。于是,这就造成了很大的局限性,因为我们经常嵌入来自其他子域的页面。这种情况下,我们可以通过设置文档的 domain 来实现。如果两个子域名分别是,a.example.com 和 b.example.com。那么我们只需要将两个页面的 domain 都设置为 example.com 就可以了。具体如下:

document.domain = 'example.com';

值得一提的是,document.domain 只能设置为当前域的父级域名或者祖先级,而且操作不可逆。如果网页的域名是 a.example.com,那么:

document.domain = 'c.a.example.com';   // 无效
document.domain = 'x.y.com'; // 无效
document.domain = 'example.com'; // 有效
document.domain = 'a.example.com'; // 无效,因为已经被设置为 'example.com'
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. 什么是跨域? 跨域一词从字面意思看,就是跨域名嘛,但实际上跨域的范围绝对不止那么狭隘。具体概念如下:只要协议...
    他在发呆阅读 4,210评论 0 0
  • 1. 什么是跨域? 跨域一词从字面意思看,就是跨域名嘛,但实际上跨域的范围绝对不止那么狭隘。具体概念如下:只要协议...
    w_zhuan阅读 3,547评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,810评论 19 139
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    前端进阶之旅阅读 115,193评论 24 450
  • 一一62年前的今天,一个卑微平凡的小生命呱呱坠地,诞生在一个普通的小镇上的一个普通的家庭里;他是这个家里诞生的第四...
    妙成居士阅读 2,839评论 1 1

友情链接更多精彩内容