자바스크립트 새창에 값 출력하는 방법 window.open()

자바스크립트로 브라우저의 새창을 만들어서 값을 출력하는 방법에 대해 알아봅니다. window.open() 을 사용하는 방법입니다. 기초중에 기초이니 고수님들은 얼른 나가주세요.

const name = '홍길동';
const age = '25';
const hobby = '피아노 치기';

const win = window.open('','','width=700,height=500'); //새 윈도우 창을 만들고
win.focus(); // 포커스를 준다음에

win.document.body.innerHTML = `<p>이름은 ${name} 입니다</p><p>나이는 ${age} 입니다</p><p>취미는 ${hobby} 입니다</p>`;

window.open(url, name, spec, replace) 이해하기

window.open은 반환 값으로 새로 만들어진 창객체를 반환하며, 실패하면 null을 반환합니다. 위의 코드 예에서 만약 창을 닫고 싶다면 win.close(); 하면 됩니다.

URL

비워두면 빈창이 열립니다. 주소를 입력하면 그 주소창이 열립니다.

Name

기본값은 _blank로서 새창으로 열리는 것입니다. 새로 열릴 창의 속성을 정의합니다.

• _blank : 새창ㅇ으로 열립니다. (default)
• _parent : 부모 프레임에 열립니다.
• _self : 현재 창의 내용을 대체하면서 열립니다.
• _top : 로드된 프레임셋을 대체합니다.
• _name(사용자이름) : 새창이 열리면서 창의 이름을 지정합니다. 같은 이름을 다시 open()하면 기존 열린창의 내용이 바뀌고 다른 이름을 사용하면 새창이 또 열립니다.

specs

• height, width : 창의 높이와 너비를 정합니다. (단위는 픽셀입니다.)
• status = yes,no,1,0 : 메뉴바의 사용여부를 정합니다.

let win = window.open("/test.html", "myWindow", "width=500,height=600");

let win = window.open("", "myCoCo", "width=500,height=600");

오늘은 이것으로 window.open()에 대해 알아봤습니다. 새창을 열어서 변수의 값을 전달하는 그런 것에 유용합니다.