창 사이에 데이터를 보내는 JavaScript

10924 단어 beginnersjavascriptwebdev
최근에 팝업 창을 열어야 하는 시스템에서 작업했습니다. 팝업 창과 선택 항목을 받는 데 필요한 팝업을 호출한 원래 창에서 특정 작업을 수행할 수 있습니다.

빌드하기가 약간 이상하게 들릴 수 있지만 생각보다 쉽습니다.

이 문서에서는 기본 페이지를 만듭니다. 클릭하면 새 팝업 창이 열립니다.
다른 버튼은 이 창에 정적 메시지를 보낼 수 있습니다.

이 팝업 창에서 사용자는 세 가지 옵션을 선택하고 선택한 옵션을 원본으로 다시 보낼 수 있습니다.

아래 비디오에서 이에 대한 데모를 볼 수 있습니다.


구조 설정



저는 이 프로젝트를 위해 매우 간단한 설정을 만들기로 결정했습니다.
새 폴더를 생성하여 시작하고 내부에 index.html , sub.html 및 index.js 파일을 생성합니다.
index.html 콘텐츠를 만드는 것으로 시작하겠습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Sending messages</title>
  </head>
  <body>
    <p>Welcome. You can click the button below to open a new tab</p>
    <button onclick="openNewWindow()">Open new tab</button>
    <button onclick="sendMessage()">Send message</button>
    <p id="response"></p>
    <script src="index.js"></script>
  </body>
</html>


인덱스와 매우 유사한 sub.html 페이지로 이동하겠습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Sending messages</title>
  </head>
  <body>
    <p>I'm the sub page</p>
    <p id="response"></p>
    <p>Choose your response</p>
    <button onclick="closeWindow(`That's amazing`)">That's amazing</button>
    <button onclick="closeWindow(`Pretty cool`)">Pretty cool</button>
    <button onclick="closeWindow(`Meh, could be cooler`)">
      Meh, could be cooler
    </button>
    <script src="index.js"></script>
  </body>
</html>


JavaScript를 사용하여 창 간에 메시지 보내기



이 특정 기사에서는 하나의 일반 JavaScript 파일을 사용하기로 결정했습니다. 그러나 두 개의 파일로 분할할 수도 있습니다.
index.js 파일을 열어봅시다.
가장 먼저 추가하고 싶은 것은 실제로 창을 여는 것입니다.

let newWindow;

const openNewWindow = () => {
  const params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=300,height=300`;
  newWindow = window.open('sub.html', 'sub', params);
};

window.open 함수에 여러 매개변수를 전달합니다.
  • sub.html : 열려고 하는 페이지
  • sub : 열려는 페이지의 이름(아무거나 가능)
  • params : 이 새 창에 대한 옵션

    • 내가 이 새 창을 변수로 설정한 것을 발견했을 수도 있습니다. 우리는 이것을 다른 버튼으로 데이터를 보내는 것을 보았습니다.

    이 새로운 팝업 창에 데이터를 보내려면 sendMessage 함수를 만들어야 합니다.

    const sendMessage = () => {
  newWindow.postMessage({ foo: 'bar' }, '*');
};


    이것은 foo: bar 값을 가진 개체를 포함하는 창에 새 메시지를 게시합니다.

    이제 수신 측에서 작업할 수 있습니다. postMessage 함수를 사용했기 때문에 현재 창에 대한 메시지를 구독할 수 있습니다.

    그렇게 하려면 다음 수신기를 만듭니다.

    const response = document.getElementById('response');

window.addEventListener('message', (event) => {
  if (event.data?.foo) {
    response.innerText = event.data.foo;
  }
});


    이 함수는 모든 메시지를 듣고 foo 개체와 함께 들어오는 경우 응답 텍스트를 해당 값으로 설정합니다.

    다음 부분은 원래 창으로 데이터를 다시 보내는 것입니다. sub.html 함수를 호출하는 closeWindow 파일에 세 개의 버튼을 만들었습니다.
    계속해서 해당 기능을 추가해 보겠습니다.

    const closeWindow = (message) => {
  window.opener.postMessage({ msg: message }, '*');
  window.close();
};


    그리고 다시 postMessage 함수를 활용할 수 있지만 이번에는 원래 창을 참조하는 opener 에서 호출합니다.

    이제 이 특정 메시지를 처리하도록 이벤트 수신기도 수정하겠습니다.

    window.addEventListener('message', (event) => {
  if (event.data?.foo) {
    response.innerText = event.data.foo;
  }
  if (event.data?.msg) {
    response.innerText = event.data.msg;
  }
});


    짜잔, 이제 JavaScript에서 두 창 사이에 메시지를 보낼 수 있습니다.

    소스 코드를 보고 싶으시면 GitHub에 업로드했습니다.

    읽어주셔서 감사합니다. 연결합시다!



    제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나
    Gitlab CI에서 외부 비밀에 액세스
    CommonJS 및 ESM 사용을 위한 Node.js 모듈 생성

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage