解決跨域視窗的通訊問題

js前端解決方案：

1、片段識別符（fragment identifier）

2、跨文件通訊api（cross-document messaging）- window.postmessage()

片段識別符號

片段識別符號指的是url # 號後面的部分

比如的flag；改變片段識別符號，頁面不會重新整理

父視窗改變子視窗的url

// 父視窗改變子視窗的url

var src = originurl +
'#'+ data;
document.
getelementbyid
('myiframe'
).src = src;
// 子視窗繫結onhashchange方法，url改變會觸發onhashchange方法
window.onhashchange = checkmessage;
function
checkmessage()

// 子視窗改變父視窗類似

parent.location.href = target +
'#'+ hash;

window.postmessage(引數1，引數2)

引數1：具體的資訊內容

引數2：視窗的源（協議 + 網域名稱 + 埠 / *代表所有視窗）

父視窗向子視窗傳送資訊

父視窗：   子視窗：

// 父視窗開啟乙個子視窗

var popup = window.
open
('','title');
// 父視窗向子視窗發訊息
popup.
postmessage
('hello world!'
,'');

// 子視窗向父視窗發訊息

window.opener.
postmessage
('nice to see you'
,'');

// 父視窗和子視窗都可以用下面的**，

// 監聽 message 訊息
window.
addeventlistener
('message'
,function
(event)
else},
false);
注：2、postmessage方法中指定的目標視窗的**如果是乙個星號，表示該資訊可以向任意**傳送（一般不建議這樣做）

樣例：父視窗向子視窗存入物件和讀取物件

// 子視窗

window.
onmessage
=function
(e)}
;// 父視窗
var win = document.
getelementsbytagname
('iframe')[
0].contentwindow;
var obj =
;// 存入物件
win.
postmessage
(json
.stringify()
,'');
// 讀取物件
win.
postmessage
(json
.stringify()
,"*");
window.
onmessage
=function
(e);

跨域和跨視窗通訊

同源政策 協議相同，埠號相同，網域名稱相同 不同源限制 1.cookie，localstroge，indexdb不能訪問 2.dom iframe不同視窗不能訪問到dom 3.ajax不能請求 規避方法 1.跨域視窗通訊 片段識別符 通過改變子視窗的hash值，把資訊放到hash值上，然後子視窗會監...

跨域視窗通訊，可實現跨域單點登入

目前比較主流的專案都是前後端分離的專案，此時會使用token來驗證使用者資訊。這時要想實現單點登入無非就是不同的 能擁有已經登入過 的token和一些使用者資訊，就可以實現不用再登入就能訪問頁面的功能。還是以a b和c 來舉例吧。c 作為 訊息的 需要實現監聽訊息，並且將訪問localstorage...

解決跨域問題

什麼是跨域訪問 舉個栗子 在a 中，我們希望使用ajax來獲得b 中的特定內容。如果a 與b 不在同乙個域中，那麼就出現了跨域訪問問題。你可以理解為兩個網域名稱之間不能跨過網域名稱來傳送請求或者請求資料，否則就是不安全的。總而言之，同源策略規定，瀏覽器的ajax只能訪問跟它的html頁面同源 相同網...