在前端開發的過程中，我們常常會用到iframe去在我們的頁面中引用一個子頁面，而父子頁面又常常會有交互。在同域情況下，子頁面如果想要訪問父頁面中的window對象中的方法的話，直接在當前頁面中使用window.parent就可以啦。但是在跨域情況下就會受到種種限制。
如圖所示，我用node在本地起了2個server，端口號分別是：8124和8123。
下面，我在server1頁面中通過iframe的方式將server2的頁面引入，如圖：
我們在子頁面“server2”中打印一下當前頁面和父頁面的window對象，如圖：
如圖所示，在子頁面中，父頁面window對象中絕大多數方法和屬性都已經拿不到了。這其實就是跨域造成的限制。
比如說我們在父頁面中定義了一個sessionStorage，
然后在子頁面中訪問父頁面的sessionStorage:
不出所料，報了一個跨域的錯誤
這就是由於跨域導致了子頁面無法調用和訪問父頁面中的屬性和方法，這給我們的業務開發帶來了很大的影響。解決這種問題最好的辦法就是將子頁面和父頁面放到同一域名下，那么跨域問題自然就解決了。
可是在實際業務中，由於客觀原因，我們往往無法做到將父頁面和子頁面放倒同一域名下。那有沒有其他方法可以在跨域的情況下，依然讓子頁面調用父頁面中的方法呢？當然是有的！
經過在網上查閱相關資料文章，我大體得到兩種方法，第一種是“代理頁面”法，第二種是通過“postMessage”法。
下文將詳細介紹“代理頁面”法
何為“代理頁面法”？簡言之就是，在父頁面的同域下，放一個代理頁面，代替子頁面去執行調用父頁面中方法的操作。
文字描述略顯枯燥，接下來我用圖片分步講解這一過程：
第一步：我在父頁面的同域下新建了一個代理頁面：iframe.html，在這個代理頁面中注冊一個“window.onload”監聽事件，當代理頁面被加載的時候，執行window.top對象上的“excute”方法。
第二步：在父頁面中定義將要被執行的excute方法，該方法打印出當前頁面中的sessionStorage（之前子頁面想要做的事）
第三步：在子頁面中定義一個方法，當觸發該方法時會在子頁面中create一個看不到的iframe，並將代理頁面的地址，賦給這個iframe。
經過這三個步驟，代理頁面的方式訪問父頁面window對象的方法已經完成了：
此時，點擊子頁面中的“跨域”按鈕，就會把父頁面中的sessionStorage打印出來。
整理一下，其實思路如圖所示：
當在子頁“http://localhost:8123/index2”中觸發事件時，創建一個iframe，iframe引入代理頁“http://localhost:8124/iframe.html”，代理頁在加載時通過“window.top.excute”執行父頁“http://localhost:8124/index1.html”中的excute方法。這樣就實現了在子頁面中與父頁面跨域進行交互！
引自