記業務的坑用iframe來救？

最近在承接公司一個大需求，涉及兩個項目和一個公共庫。然而，公司技術相對滞後還沒有采用微前端架構。是以坑苦了我

坑的點

由于沒有微前端架構，是以一個項目增加的元件無法被另一個項目使用。雖然公共庫内的元件可以被A、B兩個項目分别使用。但是公共庫自身内，沒有新增需求的依賴元件資料和業務元件。現狀是大部分業務元件都在A項目下，然後還想被使用在B項目内。當然由于公司項目目前使用了dva的資料架構，并且這個需求牽扯到的元件多的不計其數。根本無法通過copy完成。而且所需要的接口也很多。簡直就離個大譜。

應對方案

開始以為不幸中的萬幸是B項目一定會在A項目加載後出現，是以講A目前所需元件挂在到了window上，然後在公共庫内加工出來。這樣使用了公共庫的B項目就可以直接使用了。有了方案就是開發、提測。結果意外發生了。測試竟然直接通過路由進入了B項目，然後詢問之下發現。公司重度使用者都是用過多tab工作。是以坑的最低點來了。

補救措施

有了這個場景，就說明B項目依賴的A項目資源并不是一定在B出現前出現。第一點就想到了iframe在B中去加載元件A。

iframe的使用

1. 父用子。這裡是直接操作子iframe即可。操作路徑有三種：第一種，通過iframe的id，擷取内容。第二種，通過iframeName擷取。第三種通過frames數組角标或者frames[iframeName]擷取。
2. 子用父。這裡也是操作父元素。路徑有倆：第一種，通過parent屬性擷取，第二種是通過top屬性擷取。注意：這裡top是指頂級元素。這裡指二級結構時可同樣适用。
3. 同級子互用。這裡相當于1 + 2。先操作父，在街父之手操作另一個自即可。這裡直接使用代碼說明，幫助大家了解。

<iframe name="name" id="id" src="demo.html"></iframe>
<iframe name="name1" id="id1" src="demo1.html"></iframe>
<iframe name="name2" id="id2" src="demo2.html"></iframe>

// 通過兄弟iframe的id擷取其dom
parent.window.document.getElementById('id1').contentWindow.youFunc(); 
parent.window.document.getElementById('id2').contentWindow.document.getElementById('元素id');

// 通過iframe的name
parent.window.name1.window.youFunc(); 
parent.window.name2.window.document.getElementById('元素id'); 

// 通過window對象的frames[]數組對象直接擷取子frame對象
parent.window.frames[1].youFunc();
top.window.frames[2].document.getElementById('元素id');

parent.window.frames["name1"].youFunc();
parent.window.frames["name2"].document.getElementById('元素id');
           

結束語