브라우저 (동일한 오리핀 정책) 제한으로 인해 JavaScript의 크로스 도메인 문제는 항상 매우 어려운 문제였습니다. HTML5는 교차 다용사 메시지 전송의 기능을 제공하고 웹 문서간에 정보를 수신하고 보냅니다. 이 기능을 사용하면 동일한 원점 (도메인 + 포트 번호)을 가진 웹 페이지가 서로 통신 할 수있을뿐만 아니라 두 개의 다른 도메인 이름 간의 도메인을 교차 할 수 있습니다.
교차 문서 메시징 크로스 문서 메시징은 실시간 메시징을 지원하는 다른 웹 문서간에 데이터를 전달하는 사후 관리 방법을 제공합니다. 많은 브라우저가 Google Chrome 2.0+, Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, Safari 4.0+ 등과 같은이 기능을 지원합니다.
그렇다면 IE6, IE7 및 HTML5를 지원하지 않는 다른 브라우저를 사용하면 어떻게해야합니까?
Window.name 메소드를 사용할 수 있습니다. Window.Name에는 크로스 도메인 문제가 포함되지 않으므로 이름을 수정하십시오. 사용하는 것이 특히 이상적이지는 않지만 그 효과는 허용됩니다.
그러나 Window.PostMessage, Window.AddeventListener, Window.Name 및 기타 내용을 쓸 수 없습니다.
이를 위해 전체 크로스 도메인 프로세스를 추상화하여 양방향 크로스 도메인 문제를 해결하고 다른 웹 문서 간의 실시간 커뮤니케이션을 실현하며 두 개의 다른 도메인 이름 사이의 교차 도메인 커뮤니케이션을 실현할 수 있습니다.
데모 다운로드 주소 : http://xiazai.vevb.com/201501/other/jcrossdomain_v2.rar, 버전 v2
자바 스크립트 크로스 도메인 플러그인 jcrossdomain.js
코드 사본은 다음과 같습니다.
(기능 (WIN) {
/**
* 꽃이 만발한 나무가 없습니다
* 2013/12/07 17:12
*/
var _jcd = {
ISINITED : False,
elmt : 거짓,
해시 : '',
Delims : ',',
rand : function () {
반환 (새 날짜) .gettime ()
},
msg : function () {
Alert ( '경고 : 처음에 Init Function을 호출해야합니다');
},
init : 함수 (콜백, elmt) {
if (_jcd.isinited == true)
반품;
_jcd.isinited = true;
_jcd.elmt = elmt;
if (win.postmessage) {
// 브라우저는 html5 postmessage 메소드를 지원합니다
if (win.addeventListener) {
// Firefox, Google 등과 같은 브라우저를 지원합니다.
win.addeventListener ( "메시지", function (ev) {
Callback.Call (WIN, EV.DATA);
},거짓);
} else if (win.attachevent) {
// IE 브라우저를 지원합니다
win.attachevent ( "onmessage", function (ev) {
Callback.Call (WIN, EV.DATA);
});
}
_jcd.msg = function (data) {
_jcd.elmt.postMessage (data, '*');
}
}또 다른{
// 브라우저는 IE6 및 7과 같은 HTML5 후 메소드 메소드를 지원하지 않습니다.
setInterval (function () {
if (win.name! == _jcd.hash) {
_jcd.hash = win.name;
Callback.Call (WIN, _JCD.HASH.SPLIT (_JCD.DELIMS) [1]);
}
}, 50);
_jcd.msg = function (data) {
_jcd.elmt.name = _jcd.rand () + _jcd.delims + 데이터;
}
}
}
};
var jcd = {
initparent : 함수 (콜백, iframeid) {
_jcd.init (콜백, document.getElementById (iframeid) .ContentWindow);
},
initchild : 함수 (콜백) {
_jcd.init (콜백, win.parent);
},
SendMessage : 함수 (데이터) {
_jcd.msg (데이터);
}
};
win.jcrossdomain = jcd;
})(창문);
상위 페이지의 통화 메소드 :
코드 사본은 다음과 같습니다.
// 사용자 정의 콜백 함수
var cb = function (msg) {
경고 ( "msg get :" + msg);
};
// 초기화, 콜백 함수 및 iframe id를로드합니다
jcrossdomain.initparent (cb, 'iframea');
// 메시지를 보냅니다
jcrossdomain.sendmessage ( 'Hello, Child');
하위 페이지의 호출 방법 :
코드 사본은 다음과 같습니다.
// 사용자 정의 콜백 함수
var cb = function (msg) {
경고 ( "msg get :" + msg);
};
// 초기화, 콜백 함수를로드합니다
jcrossdomain.initchild (CB);
// 메시지를 보냅니다
jcrossdomain.sendmessage ( 'Hello, Parent');
시뮬레이션 테스트 팁 :
다른 도메인 간의 통신을 달성하기 위해 시뮬레이션을 위해 운영 체제의 호스트 파일에 두 도메인 이름을 추가 할 수 있습니다.
호스트 파일에 두 개의 다른 도메인 이름을 추가하십시오
127.0.0.1 parent.com
127.0.0.1 child.com
프로그래머의 진화 :