postMessage()를 사용하여 도메인 간 iframe 페이지_javascript 기술 간 정보 전송 방법 구현

웹 오리진 정책의 제한으로 인해 페이지가 크로스 도메인 iframe 링크를 사용하는 경우 메인 페이지와 서브 페이지가 상호 작용할 수 없어 페이지 간 정보 전달에 많은 문제가 발생합니다. 일련의 시도 끝에 마침내 다음과 같은 방법을 찾았습니다.

1. 하위 페이지 URL 매개변수 전달

간단히 말하면, 메인 페이지와 동일한 출처를 가진 URL에 전달해야 하는 모든 매개변수를 추가하고, 하위 페이지를 해당 URL로 리디렉션한 다음, 메인 페이지는 src를 통해 이러한 매개변수를 얻습니다. iframe

과정이 매우 복잡하므로 이 방법은 권장하지 않습니다

2. 포스트메시지()

postMessage()는 HTML5에서 제공하는 이벤트 기반 메시지 전송 API로 크로스 텍스트 문서, 멀티 윈도우, 크로스 도메인 메시징을 구현할 수 있습니다.

postMessage(data,origin) 메소드는 두 개의 매개변수를 허용합니다

1.data: 전달될 데이터는 이 매개변수가 JavaScript의 기본 유형 또는 복사 가능한 객체일 수 있다고 언급합니다. 그러나 일부 브라우저에서는 문자열 매개변수만 처리할 수 있습니다. 매개변수를 전달할 때 객체 매개변수를 직렬화하려면 JSON.stringify() 메서드를 사용해야 합니다. IE의 하위 버전에서 json2.js를 참조하면 비슷한 효과를 얻을 수 있습니다.

2.origin: 대상 창의 소스를 나타내는 문자열 매개변수, 프로토콜 + 호스트 + 포트 번호[+URL]는 URL이 무시되므로 이 매개변수는 보안상의 이유로 작성될 필요가 없습니다. postMessage() 메소드만 메시지가 지정된 창으로 전달됩니다. 물론 원하는 경우 매개변수를 "*"로 설정할 수도 있습니다. 원점을 현재 창으로 설정하려면 "/"로 설정하세요.

메시지 보내기(하위 페이지)

function sendMessage(param) {
  var url;
  if (param.url) {
    url = param.url;
  };
  var dataJson = JSON.stringify({
　　　　 type:1,　　
    a: param.c,
    b: param.c,
    c: param.c,
    url: url
  });
  window.parent.postMessage(dataJson, '*');
}

일부 브라우저는 문자열 매개변수만 처리할 수 있으므로 먼저 JSON.stringfy()를 사용하여 매개변수를 문자열로 변환한 다음 수신 페이지에서 JSON.parse()를 사용하여 변환해야 합니다. 다시 객체로 돌아갑니다.

메시지 받기

하위 페이지에서 전달된 매개변수의 경우 창의 메시지 이벤트를 수신하여 얻을 수 있습니다.

window.addEventListener('메시지', function(e) {
      var data = JSON.parse(e.data);
스위치(data.type) {
사례 1:
경고(data.a);휴식;
}
}, 거짓);

메시지 이벤트에는 몇 가지 중요한 속성이 있습니다

1.data: 이름에서 알 수 있듯이 전달되는 메시지입니다
2.source: 메시지를 보내는 창 개체
3.origin: 메시지 창의 소스(프로토콜 + 호스트 + 포트 번호)
postMessage() 메서드와 메시지 이벤트를 통해 도메인 간 메시지 전달이 가능합니다. 데모에서는 하위 페이지를 통해 상위 페이지로 메시지를 전달하므로 window.parent를 사용하여 전송하고 창을 보냅니다. 수신:

window.parent.postMessage(dataJson, '*'); 홈페이지에서 서브페이지로 가는 경우에는 window를 사용하고 수신하려면 window.frames[0]을 사용하여 교체해야 합니다.

위 기사는 postMessage()를 사용하여 도메인 간 iframe 페이지 간의 정보 전송을 구현합니다. 이는 편집자가 공유한 모든 내용이므로 참고할 수 있기를 바라며, Script Home을 지원해 주시기 바랍니다.