JavaScript_javascript 기술로 구현된 양방향 도메인 간 플러그인 공유

브라우저(동일 출처 정책) 제한으로 인해 JavaScript 교차 도메인 문제는 항상 다소 까다로운 문제였습니다. HTML5는 웹 문서 간 정보를 서로 주고받을 수 있도록 문서 간 메시지 전송 기능을 제공합니다. 이 기능을 이용하면 동일한 출처(도메인 포트 번호)를 가진 웹페이지끼리 통신할 수 있을 뿐만 아니라, 서로 다른 두 도메인 이름 간에도 도메인 간 통신이 가능합니다.

문서 간 메시징 Cross Document Messaging은 서로 다른 웹 문서 간에 데이터를 전송하는 postMessage 메서드를 제공하고 실시간 메시징을 지원합니다. 이제 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 등을 항상 작성할 수는 없습니다.

이를 위해 전체 크로스 도메인 프로세스를 추상화하고 이를 JavaScript 플러그인으로 캡슐화하여 양방향 크로스 도메인 문제를 해결하고 서로 다른 웹 페이지 문서 간의 실시간 통신을 실현하며 크로스-도메인을 달성했습니다. 두 개의 서로 다른 도메인 이름 간의 도메인 통신.

데모 다운로드 주소: http://xiazai.jb51.net/201501/other/jcrossdomain_v2.rar, 버전 v2

javascript 크로스 도메인 플러그인 jcrossdomain.js

코드 복사 코드는 다음과 같습니다.

(함수(win){
/**
* 꽃 없는 나무
* 2013/12/07 17:12
​*/
var _jcd = {
isInited : 거짓,
elmt : 거짓,
​ 해시: '',
구분 : ',',
랜드 : 함수(){
        반환(새 날짜).getTime()
},
msg : 함수(){
Alert('경고: 먼저 init 함수를 호출해야 합니다.');
},
초기화: 함수(콜백, elmt){
If(_jcd.isInited == true)
         반품;
​ _jcd.isInited = true;
_jcd.elmt = elmt;
If(win.postMessage){
//브라우저는 HTML5 postMessage 메소드를 지원합니다
If(win.addEventListener){
//Firefox, Google 및 기타 브라우저 지원
            win.addEventListener("message", function(ev){
               callback.call(win, ev.data);
           },거짓);
          }else if(win.attachEvent){
//IE 브라우저 지원
           win.attachEvent("onmessage", function(ev){
               callback.call(win, ev.data);
           });
}
​​​​ _jcd.msg = 함수(데이터){
​​​​​​ _jcd.elmt.postMessage(data, '*');
}
}그밖에{
//브라우저는 IE6 및 7과 같은 HTML5 postMessage 메소드를 지원하지 않습니다
setInterval(함수(){
If (win.name !== _jcd.hash) {
                _jcd.hash = win.name;
               callback.call(win, _jcd.hash.split(_jcd.delims)[1]);
          }
         }, 50);
​​​​ _jcd.msg = 함수(데이터){
​​​​​ _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 = 함수(msg){
Alert("메시지 가져오기:" msg);
};

//초기화, 콜백 함수 및 iframe ID 로드
jCrossDomain.initParent(cb, 'iframeA');

//메시지 보내기
jCrossDomain.sendMessage('hello, child');

하위 웹페이지 통화 방법:

코드 복사 코드는 다음과 같습니다.

//맞춤 콜백 함수
var cb = 함수(msg){
Alert("메시지 가져오기:" msg);
};

//초기화, 콜백 함수 로딩
jCrossDomain.initChild(cb);

//메시지 보내기
jCrossDomain.sendMessage('hello, parent');

시뮬레이션 테스트 팁:
서로 다른 도메인 간의 통신을 달성하기 위해 시뮬레이션을 위해 운영 체제의 호스트 파일에 두 개의 도메인 이름을 추가할 수 있습니다.

호스트 파일에 두 개의 서로 다른 도메인 이름 추가
127.0.0.1 parent.com
127.0.0.1child.com

프로그래머의 진화 과정: