182. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 window.open 팝업창 새창 열기 수행 시 브라우저 팝업 차단 권한 체크 코드

---

[설 명]

​

프로그램 : Web / JavaScript

​

설 명 : [Web/JavaScript] 자바스크립트 window.open 팝업창 새창 열기 수행 시 브라우저 팝업 차단 권한 체크 코드

​

 

---

[소스 코드]

​

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

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / Browser / window.open / 팝업 차단 권한


- 사전) ✅ 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 명시 */);
    }


- 사전) 👉 window.open 시 옵션 설정 주요 참고 사항 간략 설명 : 

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

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

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

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

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

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

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





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

-----------------------------------------------------------------
[부모 : 자바스립트 전역 변수 선언]
-----------------------------------------------------------------
var GLOBAL_WINDOW_OPEN_FLAG = false; 



-----------------------------------------------------------------
[부모 : 브라우저 message 메시지 이벤트 수신 리스너 등록]
-----------------------------------------------------------------
window.onload = async function() { }; : html 최초 로드 및 이벤트 상시 대기 이벤트 내에 해당 리스너 등록
-----------------------------------------------------------------
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');
      
      GLOBAL_WINDOW_OPEN_FLAG = true; // ✅ 전역 변수 플래그 변경 >> 하위 windowOpenEnabled 함수에서 전역 변수 플래그 값 체크 로직 사용

      setTimeout(() => {
        alert('\n' + 'window.open 팝업창 열기 권한 체크가 완료 되었습니다 !!' + '\n');
      }, 2500);

    }

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

});



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

  GLOBAL_WINDOW_OPEN_FLAG = false; // ✅ 전역 변수 플래그 변경

  try {

    // -----------------------------------------------
    // 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);


    // -----------------------------------------------
    // 10) 메모리 정리: 약간 지연 후 Blob URL 해제 (열림 직후 바로 revoke 하면 로드 실패할 수 있음)
    // -----------------------------------------------    
    startLoading(); // 로딩 프로그레스 동작

    setTimeout(() => {
      console.log('setTimeout window.open permission check : ', GLOBAL_WINDOW_OPEN_FLAG);

      stopLoading(); // 로딩 프로그레스 종료

      try {
        URL.revokeObjectURL(url);

        if (GLOBAL_WINDOW_OPEN_FLAG == false){ // ✅ 전역 변수 플래그 값 체크 : 이벤트를 수신 받지 못함 : window open 차단 상태
          setTimeout(() => {

            alert('\n' + 'window.open 팝업창 권한이 비활성 상태 입니다 .. 상단 주소 표시줄에서 팝업창 표시 [허용] 을 해주세요.' + '\n');

          }, 1000);

        }

      }
      catch (err){
        console.error('window.open permission check : exception : ', err);
      }

    }, 3000); // ✅ 3초 대기 권한 확인

  } catch (exception) {
    console.error('windowOpenEnabled : Exception : ', exception);
  }

};

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





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

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

https://kkh0977.tistory.com/8668

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


[간단 소스] 자바스크립트 동적 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

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

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/8668

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

---