> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트에서 postMessage를 어떻게 사용하나요?

자바스크립트에서 postMessage를 어떻게 사용하나요?

藏色散人
풀어 주다: 2021-09-12 16:44:06
앞으로
3462명이 탐색했습니다.

상위 페이지와 하위 페이지는 서로 다른 도메인에 있으며 둘 사이의 대화에는 postMessage가 사용됩니다. 이하에서는 편의상 F페이지와 C페이지로 통칭합니다.

페이지 C의 버튼 클릭 이벤트는 페이지 F에 작은 C 메시지를 보냅니다. 페이지 F는 메시지 작은 C를 수신하고 로직 LC를 실행합니다. LC 실행이 완료된 후 페이지 F는 페이지 C에 작은 F 메시지를 보냅니다. 페이지 C는 small F 메시지를 수신합니다. 논리적 LF를 실행합니다. 한마디로 F페이지와 C페이지가 서로 통신한다는 뜻이다.

는 React의 부모-자식 컴포넌트 통신과 유사하게

라고 생각하면 됩니다.

C 페이지 js 코드:

var btnObj = document.getElementById('buttons');
btnObj.onclick = function(){
     var defaultAdData = {
                 type:'advert', 
                 gameData:{
                     adId: '123'
                 }
         };
     window.parent.postMessage(JSON.stringify(defaultAdData), '*');
    /*我是错误代码:
     var receiveMessage = function(event) {
         var datas = JSON.parse(event.data);
         if (datas.type === "adGivePrize"&&datas.givePrize) {
             alert(‘click’);
         }
     }
     window.addEventListener("message", receiveMessage, false);*/
 }
 /*我是正确代码:
 var receiveMessage = function(event) {
     var datas = JSON.parse(event.data);
     if (datas.type === "adGivePrize"&&datas.givePrize) {
         alert(‘click’);
     }
 }
 window.addEventListener("message", receiveMessage, false);*/
로그인 후 복사

F 페이지 js 코드:

var receiveMessage = function(event) {
      var datas = JSON.parse(event.data);
      if (datas.type === "advert") {
            var postIframeData = {
                    type:'adGivePrize',
                    givePrize:true
            };
            //iframe发送信息~~~~
            window.frames[0].postMessage(JSON.stringify(postIframeData), '*');
      }
}

window.addEventListener("message", receiveMessage, false);
로그인 후 복사

간단히 말하면 이 방법은 관련되지 않은 두 페이지 간의 통신을 제공하므로 외부 프로젝트나 내장된 iframe이 서로 통신할 수 있습니다.

추천 학습: "javascript 기본 튜토리얼"

위 내용은 자바스크립트에서 postMessage를 어떻게 사용하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:segmentfault.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿