一提到跨頁面通信，首先想到的相關的東西就是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，燒腦的跨頁面