前端開發(fā)中，常會遇到iframe引入頁面的情況，如果在同域下，子頁面訪問父頁面中的window對象的方法，直接使用window.parent就行了，特別簡單，但是如果跨域的情況下就會受到限制。
跨域錯誤信息
image.png
經(jīng)過網(wǎng)上查找總結三種方法解決
一、放到同一個域名下（如果客觀條件允許的話）
二、代理頁面方法
image.png
建立iframe代理頁面
第一步：我在父頁面的同域下新建了一個代理頁面：iframe.html，在這個代理頁面中注冊一個“window.onload”監(jiān)聽事件，當代理頁面被加載的時候，執(zhí)行window.top對象上的“excute”方法。
image.png
在父頁面中定義將要被執(zhí)行的excute方法
第二步：在父頁面中定義將要被執(zhí)行的excute方法，該方法打印出當前頁面中的sessionStorage（之前子頁面想要做的事）
image.png
在子頁面中定義一個方法
第三步：在子頁面中定義一個方法，當觸發(fā)該方法時會在子頁面中create一個看不到的iframe，并將代理頁面的地址，賦給這個iframe。
經(jīng)過這三個步驟，代理頁面的方式訪問父頁面window對象的方法已經(jīng)完成了：
image.png
執(zhí)行結果
此時，點擊子頁面中的“跨域”按鈕，就會把父頁面中的sessionStorage打印出來。
整理一下，其實思路如圖所示：
image.png
代理頁面解決跨域問題思路示意圖
當在子頁“http://localhost:8123/index2”中觸發(fā)事件時，創(chuàng)建一個iframe，iframe引入代理頁“http://localhost:8124/iframe.html”，代理頁在加載時通過“window.top.excute”執(zhí)行父頁“http://localhost:8124/index1.html”中的excute方法。這樣就實現(xiàn)了在子頁面中與父頁面跨域進行交互！
引自：http://www.itdecent.cn/writer#/notebooks/19577515/notes/93127124/preview
