蛋疼的iframe，烧脑的跨页面
Posted ounijiang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了蛋疼的iframe，烧脑的跨页面相关的知识，希望对你有一定的参考价值。
一提到跨页面通信，首先想到的相关的东西就是a标签啦，window.open啦，iframe啦。先讲讲大体的业务场景，后台管理系统设计交换机路由器等的拓扑图（创建的时候打开新窗口，在新窗口设计拓扑图保存后回馈到父窗口进行下一步操作），前台用户界面显示后台创建的拓扑图以供操作（内嵌iframe），拓扑图使用的是mxgraph,集成与vue项目里的，此处不表。然后，各种蛋疼的问题就随之而来了。
后台的相关的功能有设计和预览，设计是交互流程是点击创建 > 转到创建页面 > 补充其余相关信息（标题、说明、文件等）> 点击设计拓扑图打开新窗口 > 新窗口载入拓扑数据 > 设计保存 > 通知主窗口，新窗口关闭 > 主窗口点击保存创建完成；预览的流程是点击预览 > 通过接口获取拓扑图参数，根据参数打开新窗口 ，显示拓扑图。
前台的功能是把后台新建的各个拓扑图呈现给用户，用户可以通过操作拓扑图达到训练的目的。
然后呢，说一下之间遇到的问题，虽然说可能场景不同，对场景的描述除非亲身体验过否则总会让人觉得云里雾里，但细分到实现步骤面临的就是一个个真真切切的坑，或许能有所帮助，假如问题相类似的话。
老实说，我是不太待见这个iframe的，怎么说呢，其一，iframe的内容加载完毕前会阻塞掉本窗口，游戏体验极差；其二，无论是通过window.open、a标签、iframe打开的窗口都对父窗口有完全的操控权，通过window.openner来调用就能为所欲为，但是反过来呢，除非同源，不然的话哪凉快哪待着去；其三，有一个名为ligerui的前端框架（听说前几年还是挺火的，好多公司的传统老项目都用的是这个），里面各个组件动不动就iframe。何其不幸的是有一次需要去往老项目里加新页面新功能，遇见的就是这个玩意儿，而且还不单单是这个东西，项目嘛，风格总归不会跟框架一模一样，总是会基于某个框架，或定制或覆盖的更改其样式，然后当时瞄了一样公司所谓的基于ligerui的通用组件库：页面动不动就iframe，css动不动就overflow：hidden，js动不动就各种jq版本文件乱飞，更改的地方又不带注释什么的，花式爆炸，螺旋升天，各种懵逼有木有，告辞~
以上是关于蛋疼的iframe，烧脑的跨页面的主要内容，如果未能解决你的问题，请参考以下文章