關於跨域的N種方法實踐之iframe+domain
阿新 • • 發佈：2019-03-28
=== alert 只讀 html 相同 set doctype 傳參 script
一、原理
1、主域相同，子域不同，可以設置document.domain來解決跨域。
2、在http://www.example.com/a.html和http://sub.example.com/b.html兩個文件中都加上document.domain = "example.com"；
3、通過a.html文件創建一個iframe，去控制iframe的window，從而進行交互。
二、測試方法
1、通過gulp啟用兩個本地服務器，並在hosts文件映射域名(主域名相同，子域名不同)如：
127.0.0.1 www.jiangqi.cn
127.0.0.1 top.jiangqi.cn
2、服務器A的代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我是A</title> </head> <p id="app2">我是a</p> <body> <script> document.domain = ‘jiangqi.cn‘; let ifrObj = document.createElement(‘iframe‘); ifrObj.src = ‘http://top.jiangqi.cn:8081/‘; //ifrObj.style.display = ‘none‘; document.body.appendChild(ifrObj); ifrObj.onload = function() { //=========================================一、分割線（跨域實踐）================================================================================ let ifrWin1= ifrObj.contentWindow; alert(ifrWin1.data) //1、直接獲得iframe的window對象之後，獲取iframe傳過來的data //=========================================二、分割線（iframe對象的contentWindow屬性）=========================================================== //1、通過iframe對象的contentWindow（非標準屬性；只讀；大多瀏覽器都支持），返回指定的iframe的窗口對象 let ifrWin2 = ifrObj.contentWindow; //2、給指定iframe對象的window對象傳遞參數（父子頁面傳參） ifrWin2.username = ‘張三‘ //3、直接獲取iframe頁面內的元素並操作dom元素 var obj= ifrWin2.document.getElementsByTagName(‘p‘)[0].innerText ="22"; //4、在子iframe裏可以通過window.parent或者window.top訪問父級頁面的dom //=========================================三、分割線（iframe對象的contentDocument屬性）========================================================= //1、直接獲取iframe頁面內的元素並操作dom元素。 let ifrDoc = ifrObj.contentDocument; ifrDoc.getElementsByTagName(‘p‘)[0].innerText ="33" } </script> </body> </html>
3、服務器B的代碼
<!DOCTYPE html> <html> <head> <title>我是B域</title> </head> <body> <p id="app">b</p> <script> document.domain = ‘jiangqi.cn‘; window.data = ‘傳送的數據：1111‘; var obj = parent.document.getElementsByTagName(‘p‘)[0] obj.innerText = "我把A改成了B" </script> </body> </html>
三、參考
1、https://www.cnblogs.com/camille666/p/cross_domain_document_domain.html
2、https://www.cnblogs.com/goloving/p/7828070.html
關於跨域的N種方法實踐之iframe+domain