详解iframe跨域的几种常用方法(小结)-创新互联
背景
随着业务的发展，自然地会有一些公共的业务被抽离成为公共组件共各个项目使用。但是由于各个项目用到的技术栈都有所不同，所以这个公共组件就不能方便地被引用了。为解决这个问题，我们把这个组件写成了单独的页面挂到一个域名下，其他项目采用iframe或者webview的方式去加载这个页面，从而实现功能的简单复用。
不过这过程中也产生了很多问题，单是跨域就会出现好几次了。以下我将会介绍我遇到的跨域问题以及一些解决方法。
为什么会跨域
为了保证用户信息的安全，95年的时候Netscape公司引进了同源策略，里面的同源指的是三个相同：协议、域名、端口。
违反了同源策略就会出现跨域问题，主要表现为以下三方面：
- 无法读取cookie、localStorage、indexDB
- DOM无法获得
- ajax请求无法发送
场景
最近在做一个需求，需要用iframe引入一个别人封装好的类似视频播放器的东西。iframe里面有一个全屏的按钮，点击后需要页面让iframe全屏，由于受到同源策略的限制，iframe无法告诉页面全屏。
解决办法
设置domain
document.domain作用是获取/设置当前文档的原始域部分，同源策略会判断两个文档的原始域是否相同来判断是否跨域。这意味着只要把这个值设置成一样就可以解决跨域问题了。
在此我将domain设置为一级域名的值，a页面url为a.demo.com，a页面中iframe引用的b页面url为b.demo.com，具体设置为
document.domain = 'demo.com'
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
网站栏目：详解iframe跨域的几种常用方法(小结)-创新互联
文章链接：http://6mz.cn/article/cshsoj.html