以下哪些是iframe跨域的方法,前端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 后，挂载使iframe全屏显示在a页窗口的方法。

　　//Page A window . toggle full screen=()={//do something }在B页，可以直接获取A页的window对象，直接调用。

　　//b page window . parent . toggle full screen()但是该值的设置有一定的限制，只能设置为当前文档的上一级域或者与该文档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的方法。

　　！DOCTYPE html html lang= en head meta charset= UTF-8 title/title/head body脚本window . onload=function(){ parent . parent . toggle full screen()；} /script/body/html由于C页和A页符合同源策略，所以可以避免跨域问题，执行全屏方式。

　　postmessage

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

　　//b页parent.postmessage(值， http://a . demo . com )；//a page window . addevent listener( message ，function(event){ if(event . origin！==http://b.demo.com )返回；toggle full screen()})；为了安全起见，在接收到信息后，检查event.origin的窗口以确定是否接收该信息。

　　总结

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

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

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