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