一、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