투케이2K

500. (javaScript) 자바스크립트 동적 html 코드 및 style 코드 작성 후 window open 동작 테스트 본문

JavaScript

500. (javaScript) 자바스크립트 동적 html 코드 및 style 코드 작성 후 window open 동작 테스트

투케이2K 2026. 3. 1. 10:35
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

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

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / 동적 html / 동적 Script / window open


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

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

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

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

    - '_blank': 새 탭/창

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

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

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





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

// -----------------------------------------------
// 1) window open 시 화면 사이즈 및 옵션 정의 수행
// -----------------------------------------------
const w = window.screen.availWidth;    // 작업표시줄/독 등을 제외한 가용 너비
const h = window.screen.availHeight;   // 가용 높이

const features = [
  `width=${w}`,
  `height=${h}`,
  'left=0',
  'top=0',
  'toolbar=no',
  'menubar=no',
  'location=no',
  'status=no',
  'resizable=yes',
  'scrollbars=yes',
  'noopener',
  'noreferrer',
].join(',');


// -----------------------------------------------
// 2) html 코드에 동적으로 지정할 변수 데이터 정의
// -----------------------------------------------
var resMessage = "";
resMessage += "<pre></pre>";
resMessage += "\n" + "[Title] getSignedUrl : Result" + "\n";
resMessage += "<pre></pre>";


// -----------------------------------------------
// 3) 동적 html 코드 및 style 지정 코드 작성
// -----------------------------------------------
const html = `<!doctype html>
            <html>
            <head>
            <meta charset="utf-8">
            <title>getSignedUrl</title>                            
            <style>
                body {
                    background-color: #000;
                }
                h3 {
                    color: #fff;
                }
            </style>
            </head>
            <body>
            <h3>${resMessage}</h3>
            </body>
            </html>`;


// -----------------------------------------------
// 4) 동적 html 코드를 window open 으로 열기 수행
// -----------------------------------------------
const blob = new Blob([html], { type: 'text/html' });
const url = URL.createObjectURL(blob);

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

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

502. (javaScript) [간단 소스] 자바스크립트 window.open 사용해 새창 팝업창 열기 후 window.opener.postMessage 메시지 전달 수행  (0) 2026.03.03
501. (javaScript) [간단 소스] 자바스크립트 async await 사용해 new Promise 순차 대기 sleep 일정 시간 대기 동작 코드 작성  (0) 2026.03.02
499. (javaScript) 자바스크립트 동적 html 코드 작성 및 Script 스크립트 코드 작성 후 window open 동작 테스트  (0) 2026.03.01
498. (javaScript) 자바스크립트 forEach 사용해 태그 공통 스타일 지정 및 p , h1 , div 태그에 json 데이터 pretty 정렬 출력 수행  (0) 2026.03.01
497. (javaScript) 자바스크립트 sql-formatter 라이브러리 사용해 기본 SQL 코드 자동 정렬 및 출력 수행  (0) 2026.03.01
'JavaScript' Related Articles more
Comments