iframe和跨域

一、iframe

1、窗口

• 获取 iframe 的窗口：iframe.contentWindow;
• js中获取 name：window.name
• iframe中获取 name：iframe.contentWindow.name

2、获取嵌套的iframe的上次层window

const frame = document.getElementById('iframe-id')
frame.onload =function (){
   console.log(window.parent.name)
}

二、同源策略

同源策略：浏览器安全限制。同源是指：协议+域名+端口完全一致。

 三、跨域问题解决

1、jsonp

        服务器中转跨域，script 标签没有跨域限制，可以使用script 标签加载不同的 src，解决跨域问题。

注意：

• func必须是全局函数
• 需要服务端的支持
• 所有的src 都是 get 请求，无法支持其他请求。            

2、CORS

        跨域资源共享。系统 http头决定浏览器是否接受前端跨域请求之后响应过来的结果：

        如上服务端配置 header 中 Web端的域名，*表示全部通过，也可以指定固定域名。这样，Web 端访问时候就可正常打开指定的域名了，否则会出现跨域问题。

3、proxy

        创建代理虚拟的服务器。在生产环境 nginx 代理，项目 config.js配置。

4、window.name+iframe
    
5、postMessage+iframe：不常用，漏洞大，xss 攻击，兼容性差
6、hash+iframe