轉載：https://www.cnblogs.com/happy-8090/p/11570998.html
4種通過iframe跨域與其他頁面通信的方式
不同域下的iframe不能進行操作。
1、location.hash：
在url中，http://www.baidu.com#helloword的#helloworad就是location.hash，改變hash值不會導致頁面刷新，所以可以利用hash值來進行數據的傳遞，當然數據量是有限的。
假設localhost:8080下有文件cs1.html要和localhost:8081下的cs2.html傳遞消息，cs1.html首先創建一個隱藏的iframe，iframe的src指向localhost:8081/cs2.html，這時的hash值就可以做參數傳遞。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CS1</title>
</head>
<body>
<script>
// http://localhost:8080/cs1.html
let ifr = document.createElement('iframe');
ifr.style.display = 'none';
ifr.src = "http://localhost:8081/cs2.html#data";
document.body.appendChild(ifr);
function checkHash() {
try {
//去掉?
let data = location.hash ? location.hash.substring(1) : ' ';
console.log('獲得到的數據是：', data);
}catch(e) {
}
}
window.addEventListener('hashchange', function(e) {
console.log('獲得的數據是：', location.hash.substring(1));
});
</script>
</body>
</html>
cs2.html收到消息後通過parent.location.hash值來修改cs1.html的hash值，從而達到數據傳送。
<body>
<script>
// http://locahost:8081/cs2.html
switch(location.hash) {
case "#data":
callback();
break;
}
function callback() {
const data = "some number: 1111"
try {
parent.location.hash = data;
}catch(e) {
// ie, chrome 下的安全機制無法修改 parent.location.hash
// 所以要利用一箇中間的代理 iframe
var ifrproxy = document.createElement('iframe');
ifrproxy.style.display = 'none';
ifrproxy.src = 'http://localhost:8080/cs3.html#' + data; // 該文件在請求域名的域下
document.body.appendChild(ifrproxy);
}
}
</script>
</body>
</html>
由於兩個頁面不在同一個域下，所以瀏覽器不允許修改parent.location.hash的值，所以要藉助於localhost:8080域名下的一個代理iframe的cs3.html頁面
<script>
parent.parent.location.hash = self.location.hash.substring(1)
</script>
打開服務器
之後打開瀏覽器訪問localhost:8080/cs1.html(不是8081)，就可以看到獲取到的數據了，此時頁面的hash值已經改變了。
hash的值已經更改.PNG
缺點：
數據直接暴露在了url中
數據容量和類型都有限
2、window.name：
window.name（一般在js代碼裏出現）的值不是一個普通的全局變量，而是當前窗口的名字，要注意的是每個iframe都有包裹它的window，而這個window是top window的子窗口，而它自然也有window.name的屬性，window.name屬性的神奇之處在於name值在不同的頁面（甚至不同域名）加載後依舊存在（如果沒有修改則值不會變化），並且可以支持非常長的name值（2MB）
舉個簡單的例子：你在某個頁面的控制檯輸入：
window.name = "hello world"
window.location = "http://www.baidu.com"
頁面跳轉到了百度首頁，但是window.name卻被保存下來了，還是Hhello world。
首先創建 a.html 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a.html</title>
</head>
<body>
<script>
let data = '';
const ifr = document.createElement('iframe');
ifr.src = "http://localhost:8081/b.html";
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function() {
ifr.onload = function() {
data = ifr.contentWindow.name;
console.log('收到數據:', data);
}
ifr.src = "http://localhost:8080/c.html";
}
</script>
</body>
</html>
再創建 b.html 文件：
<script>
window.name = "你想要的數據!";
</script>
http://localhost:8080/a.html在請求遠端服務器http://localhost:8081/b.html的數據，我們可以在該頁面下新建一個iframe，該iframe的src屬性指向服務器地址（利用iframe標籤的跨域能力），服務器文件b.html設置好window.name值。
但是由於a.html頁面和該頁面iframe的src不同源的話，則無法操作iframe裏的任何東西，所以就取不到iframe的name值，所以我們需要在b.html加載完之後重新換個src區指向一個同源的html文件，或者設置成about:blank都行，這時候我們只要在a.html相同的目錄下件一個c.html空白即可。如果不重新指向src的話直接獲取的window.name的話就會報錯。
3、postMessage:
postMessage 是 HTML5 新增加的一項功能，跨文檔消息傳輸(Cross Document Messaging)，目前：Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 都支持這項功能。
首先創建 a.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a.html</title>
</head>
<body>
<iframe src="http://localhost:8081/b.html" style='display: none;'></iframe>
<script>
window.onload = function() {
let targetOrigin = 'http://localhost:8081';
//想要操作當前iframe的時候，就像該ifranme中postMessage()一個東西。
window.frames[0].postMessage('我要給你發消息了!', targetOrigin);
//*表示任何域都可以監聽。
}
//當我監聽到message事件的時候，我就知道有人向我發送數據了，我獲得了數據就可以做對應的事情。內部對消息做實現
window.addEventListener('message', function(e) {
console.log('a.html 接收到的消息:', e.data);
});
</script>
</body>
</html>
創建一個 iframe，使用 iframe 的一個方法 postMessage 可以向http://localhost:8081/b.html發送消息，然後監聽 message，可以獲得其他文檔發來的消息。
同樣的 b.html 文件：
<script>
window.addEventListener('message', function(e) {
if(e.source != window.parent) {
return;
}
let data = e.data;
console.log('b.html 接收到的消息:', data);
parent.postMessage('我已經接收到消息了!', e.origin);
})
</script>
4、document.domain降域:
對於主域相同而子域不同的情況下，可以通過設置 document.domain 的辦法來解決，具體做法是可以在 http://www.example.com/a.html和http://sub.example.com/b.html兩個文件分別加上 document.domain = “example.com”；然後通過 a.html 文件創建一個 iframe，去控制 iframe 的 window，從而進行交互，當然這種方法只能解決主域相同而二級域名不同的情況，如果你異想天開的把 script.example.com 的 domain 設爲 qq.com 顯然是沒用的，那麼如何測試呢？
測試的方式稍微複雜點，需要安裝 nginx 做域名映射，如果你電腦沒有安裝 nginx，請先去安裝一下: nginx news
前提：兩個域名後面的東西是一樣的。
先創建一個 a.html 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a.html</title>
</head>
<body>
<script>
//document.domain讓當前的域進行降域，這樣二者就可以實現相互操作和訪問了。
document.domain = 'example.com';
let ifr = document.createElement('iframe');
ifr.src = 'http://sub.example.com/b.html';
ifr.style.display = 'none';
document.body.append(ifr);
ifr.onload = function() {
let win = ifr.contentWindow;
alert(win.data);
}
</script>
</body>
</html>
再創建一個 b.html 文件：
<script>
document.domain = 'example.com';
window.data = '傳送的數據：1111';
</script>
這時只是開啓了兩個 http 服務器，還需要通過 nginx 做域名映射，將Example Domain映射到 localhost:8080，sub.example.com 映射到 localhost:8081 上
打開操作系統下的 hosts 文件：mac 是位於 /etc/hosts 文件，並添加：
127.0.0.1 www.example.com
127.0.0.1 sub.example.com
這樣在瀏覽器打開這兩個網址後就會訪問本地的服務器。
之後打開 nginx 的配置文件：/usr/local/etc/nginx/nginx.conf，並在 http 模塊裏添加：
server {
listen 80;
server_name www.example.com;
location / {
proxy_pass http://127.0.0.1:8080/;
}
}
server {
listen 80;
server_name sub.example.com;
location / {
proxy_pass http://127.0.0.1:8081/;
}
}
上面代碼的意思是：如果訪問本地的域名是Example Domain就由 localhost:8080 代理該請求。
所以我們這時候在打開瀏覽器訪問Example Domain的時候其實訪問的就是本地服務器 localhost:8080。