本文主要介绍几种常用的方法(总结)来解释iframe跨域。边肖认为这很好。现在分享给大家，给大家一个参考。来和边肖一起看看吧。

背景

随着业务的发展，自然会抽离一些公共业务，成为公共组件供各种项目使用。但是因为每个项目使用的技术栈不一样，所以这个通用的组件是不能轻易引用的。为了解决这个问题，我们把这个组件写成一个单独的页面挂在一个域名下，其他项目用iframe或者webview加载这个页面，从而实现功能的简单复用。

但是这个过程中会出现很多问题，光是跨域就会出现好几次。下面我就介绍一下我遇到的跨域问题和一些解决方法。

为什么会跨域

为了保证用户的信息安全，1995年网景推出了同源策略，其中同源是指协议、域名、端口三个相似。

违反同源策略会导致跨域问题，主要表现在以下三个方面：

无法读取cookie，localStorage，indexDB

DOM无法获取

无法发送Ajax请求。

场景

最近在做一个需求，需要用iframe推出一个类似别人打包的视频播放器的东西。iframe中有一个全屏按钮，要求页面在点击后使iframe全屏。由于同源策略的限制，iframe无法告诉页面全屏。

解决办法

设置domain

document.domain的作用是获取/设置当前文档的原域部分，同源策略会判断两个文档的原域是否相同来判断是否跨域。这意味着只要将这个值设置为相同的值，就可以解决跨域问题。

在这里，我将域设置为一级域名的值。页面A的url是a.demo.com，页面A中的iframe引用的页面B的url是b.demo.com。具体设置是

document.domain='demo.com '

设置后，在页面a的窗口上安装使iframe全屏的方法。

//一页

window.toggleFullScreen=()={

//做点什么

}

在b页，可以直接获取a页的window对象，直接调用。

//b页

window.parent.toggleFullScreen()

但该值的设置有一定的限制，只能设置为当前文档的上一级域或与该文档URL的域一致的值。如果url是a.demo.com，那么域只能设置为demo.com或a.demo.com。因此，设置域的方法只能用于解决主域相同但子域不同的情况。

使用中间页面

我们也可以用一个与A页域名相同但路由不同的C页作为中间页，B页加载C页，C页调用A页的方法，从而实现B页调用A页的方法，具体操作如下：

在页面a的节点层新建一个路由，这个路由加载一个页面C作为中间页面，页面C的url是a.demo.com/c.页面C只是一个简单的html页面，在window的onload事件中调用页面a的方法。

！文档类型html

html lang='en '

头

meta charset='UTF-8 '

标题/标题

/头

身体

脚本

window.onload=function () {

parent . parent . toggle full screen()；

}

/脚本

/body

/html

因为C页和A页符合同源策略，所以可以避免跨域问题，实现全屏方式。

postmessage

window.postMessage方法可以安全地实现跨源通信，你可以通过声明目标窗口的协议、主机地址或端口，向目标窗口发送信息。

//b页

parent.postMessage(

值，

' http://a.demo.com '

);

//一页

window . addevent listener(' message '，function( event ) {

if (event.origin！=='http://b.demo.com ')返回；

toggle全屏()

});

为了安全起见，在接收到信息后，检查event.origin的窗口以确定是否接收该信息。

总结

通过以上方法，我们可以与iframe自由通信。

这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。