蛋疼的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,烧脑的跨页面的主要内容,如果未能解决你的问题,请参考以下文章

使用Iframe嵌套其他系统页面遇到的跨域问题

iframe的跨域高度自适应(通过跨域页面中嵌套本域页面)

Iframe通信

前端异步代码烧脑的原因

postMessage处理iframe 跨域问题

postMessage处理iframe 跨域问题