502. (javaScript) [간단 소스] 자바스크립트 window.open 사용해 새창 팝업창 열기 후 window.opener.postMessage 메시지 전달 수행

---

[개발 환경 설정]

​

개발 툴 : Edit++

​

개발 언어 : JavaScript

​

 

---

[소스 코드]

 

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / window.open / window.opener.postMessage


- 사전) window.open 기능 간략 설명 : 

  >> window.open() 은 브라우저에서 새 창이나 새 탭을 열거나, 기존에 이름 붙인 창을 재사용할 때 사용하는 함수입니다

  >> window.open() 은 주로 외부 링크를 새 탭으로 열거나, 팝업(작은 창) 형태로 보조 UI를 띄울 때 사용됩니다

  >> window.open() target 주요 인자 값 : 

    - '_blank': 새 탭/창

    - '_self': 현재 창(일반 링크와 동일)

    - '_parent', '_top': 프레임/아이프레임 계층에 영향


- 사전) window.opener.postMessage 기능 간략 설명 : 

  >> window.opener : 

    - 현재 창을 열어준 부모 창(Window 객체) 을 참조합니다

    -  A 페이지에서 window.open()으로 B 팝업을 열면, B에서 window.opener는 A를 가리킴

  >> postMessage : 

    - 서로 다른 출처(origin) 간에도 안전하게 메시지를 전달할 수 있는 브라우저 내장 API입니다

    - window.opener.postMessage(...)는 팝업(자식 창) → 부모 창 방향으로 메시지를 보내는 패턴입니다

  >> 부모에서 자식메시지 전송 간략 코드 : 

    let popupRef = window.open('/popup.html', 'child', 'width=480,height=640');
    
    popupRef?.postMessage(
          { type: 'INIT', payload: { theme: 'dark' } },
          event.origin // 혹은 'https://your-app.example.com'처럼 명시
        );

  >> 자식에서 부모에게 메시지 전송 간략 코드 : 

    if (window.opener) {
      window.opener.postMessage({ type: 'READY' }, window.location.origin /* 또는 부모의 origin 명시 */);
    }

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

-----------------------------------------------------------------
[👉 사전 : 주요 참고 사항]
-----------------------------------------------------------------

1. noopener 사용해 window.open 지정 시 window.opener 가 null 이 됩니다

  >> rel="noopener" 는 보안을 위해 오프너(opener) 연결을 끊는 옵션입니다.

  >> noopener 가 있으면 브라우저가 의도적으로 이 참조를 제거하여 window.opener === null 로 만듭니다.


2. 교차 출처(Cross-origin) 시 주의사항

  >> 반드시 targetOrigin을 정확히 지정하세요.

  >> '*' 옵션은 모드 오리진 허용을 설정하는 옵션이므로 사용 시 주의가 필요합니다



-----------------------------------------------------------------
[부모 : 브라우저 message 메시지 이벤트 수신 리스너 등록]
-----------------------------------------------------------------
window.addEventListener('message', (event) => {
  try {
    console.warn("window.addEventListener(message) : receive : ", JSON.stringify(event));
    console.warn('[event.data] : ', event.data, ' / [event.origin] : ', event.origin);

    // ✅ TWOK_POPUP_READY : Window 오픈 기능 체크 완료
    if (event.data.type !== null && event.data.type !== undefined && event.data.type !== '' && event.data.type == 'TWOK_POPUP_READY'){
      console.log('window.open : TWOK_POPUP_READY : success');
      
    }

  }
  catch(error){
    console.error("window.addEventListener(message) : exception : ", error);
  }

});



-----------------------------------------------------------------
[부모 - 자식 : window.open 사용해 자식 브라우저 새창 열기 수행 및 자식 브라우저 onload 에서 동작 될 동적 스크립트 코드 작성]
-----------------------------------------------------------------

// -----------------------------------------------
// 1) window open 시 화면 사이즈 및 옵션 정의 수행
// -----------------------------------------------

const w = window.screen.availWidth; // 가용 화면 크기 구하기
const h = window.screen.availHeight; // 가용 화면 크기 구하기

//const w = 100; // 고정 사이즈 지정
//const h = 100; // 고정 사이즈 지정

const features = [ // features 구성
  `width=${w}`,
  `height=${h}`,
  'left=0',
  'top=0',
  'toolbar=no',
  'menubar=no',
  'location=no',
  'status=no',
  'resizable=no',
  'scrollbars=no',
  // 'noopener', // ✅ window.postMessag 위해 주석 처리
  // 'noreferrer', // ✅ window.postMessag 위해 주석 처리
].join(',');


// -----------------------------------------------
// 2) 스크립트 시퀀스를 깨서 HTML 파서가 조기 종료하지 않도록 보호 함수 정의
// -----------------------------------------------
function protectClosingScriptTag(code) {
  return String(code).replace(/<\/script/gi, '<\\/script');
}


// -----------------------------------------------
// 3) 엔티티 (&lt; &gt;) → 실제 문자(< >) 로 디코드 함수 정의
// -----------------------------------------------
function decodeHtmlEntities(str) {
  const div = document.createElement('div');
  div.innerHTML = str;
  return div.textContent; // 또는 div.innerText
}


// -----------------------------------------------
// 4) 주입할 스크립트 코드 작성 (필요 시 자유롭게 수정)
// -----------------------------------------------        
const scriptCode = `
  window.onload = function() {
    console.log('window open success');

    setTimeout(() => {

      try { 
        window.opener.postMessage({ type: 'TWOK_POPUP_READY', payload: { ts: Date.now() } }, '*');  // ✅ 자식 >> 부모 메시지 전달

        console.log('window.opener.postMessage : success');

        setTimeout(() => {
          console.log('setTimeout window.close');

          window.close(); // open 된 팝업창 닫기 처리
        }, 2000);

      } 
      catch(err) { 
        console.error('window.opener.postMessage : exception : ', err); 

        window.close(); // open 된 팝업창 닫기 처리
      }

    }, 1000); 

  };
`;


// -----------------------------------------------
// 5) 엔티티 상태의 HTML 뼈대 작성
// -----------------------------------------------
const htmlBaseEntities = `&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt; twok2kDynamicScript &lt;/title&gt;
    &lt;style&gt; body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; font-size: 40px; background-color: #000; color: #fff; } &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt; window open 상태 체크 중 입니다 ... 잠시만 기다려주세요. (3초 뒤에 팝업창이 자동으로 닫힘 됩니다)          
  &lt;/body&gt;
  &lt;/html&gt;`;


// -----------------------------------------------  
// 6) 엔티티 상태의 </body>를 찾아 <script> 를 삽입 (여기선 엔티티 상태 유지)
// -----------------------------------------------
const composedEntities = htmlBaseEntities.replace(
  /&lt;\/body&gt;/i,
  `&lt;script&gt;${protectClosingScriptTag(scriptCode)}&lt;/script&gt;&lt;/body&gt;`
);


// -----------------------------------------------
// 7) 최종 문자열을 실제 HTML로 디코드
// -----------------------------------------------
const finalHtml = decodeHtmlEntities(composedEntities);


// -----------------------------------------------
// 8) Blob URL 생성
// -----------------------------------------------
const blob = new Blob([finalHtml], { type: 'text/html;charset=utf-8' });
const url = URL.createObjectURL(blob);


// -----------------------------------------------
// 9) window open 팝업 열기 
// -----------------------------------------------
const popup = window.open(url, '_blank', features);

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

[간단 소스] 자바스크립트 동적 html 코드 작성, new Blob 및 URL.createObjectURL 사용해 window.open 새창 열기

https://kkh0977.tistory.com/8452

https://blog.naver.com/kkh0977/224097132149


[자바스크립트 브라우저 사이즈, 해상도 구하기 및 window open 윈도우 창 열기 실시]

https://kkh0977.tistory.com/847

https://blog.naver.com/kkh0977/222392594793?trackingCode=blog_bloghome_searchlist


[자바스크립트 window open close 사용해 현재 브라우저 창 닫기 수행 - 브라우저 종료]

https://blog.naver.com/kkh0977/223203344998?trackingCode=blog_bloghome_searchlist


[모바일] 내부 window open 상태 감지 및 새로운 웹뷰 작업 로직 수행 방법

https://blog.naver.com/kkh0977/222609480598?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/8452

456. (javaScript) [간단 소스] 자바스크립트 동적 html 코드 작성, new Blob 및 URL.createObjectURL 사용해 windo

---