跨域的时候可以访问到哪些属性，其含义分别是啥

1、背景

最近在开发iframe页面，想对iframe跨域的情况更进一步了解，跨域的时候，可以访问到iframe 文档中哪些属性

2、行动

// 打开跨域的页面，只要不是当前的窗口不是google就行
const opener = window.open('https://www.google.com') 
Object.keys(opener)
// (13) ["window", "self", "location", "closed", "frames", "length", "top", "opener", "parent", "close", "focus", "blur", "postMessage"]

可以看到在跨域的情况下，只支持上面的13个属性

3、属性解析

1、window

是对自己的引用

window.window === window

2、self

同样是对自己的引用

window.window === window.self

3、location

只支持location下面的replace和href属性，其他属性访问会报跨域的错

4、closed

判断当前窗口是否关闭

5、frames

属性返回窗口中所有命名的框架

注意: 该属性也可用于 <frame> 元素，但是 HTML5 不支持 <frame> 元素。

6、length

返回在当前窗口中frames的数量（包括IFRAMES）。

7、top

返回最顶层窗口对象的引用

8、opener

保存着打开此窗口的窗口对象引用，有点绕，点击链接查看详情

注意: 是不支持open方法的

9、parent

父窗口

10、close

关闭当前窗口

11、focus

聚焦当前窗口

12、blur

失焦

13、postMessage

跨域通信标准api

注意

如果直接访问location.href属性还是会提示跨域，这个就很郁闷了