JavaScript 공부 ( 페이지 이동, 새 탭에서 열기, 새 창에서 열기 )

1. 페이지 이동

• 뒤로가기 경로 O ( 새로운 페이지 이동 )
  • window.location.href = url
• 뒤로가기 경로 X ( 기존 페이지 → 새로운 페이지 변경 )
  • window.location.replace(url)

2. 새 탭에서 열기, 새 창에서 열기

open()
open(url)
open(url, target)
open(url, target, windowFeatures)

• url - 로드할 리소스의 url 또는 경로를 나타내는 문자열
• target - 리소스가 로드되는 브라우징 컨텍스트의 이름을 지정하는 문자열

target	설명
_blank	새 창으로 연다. (기본값) ( 새 탭에서 열기 )
_parent	부모 프레임에 열린다.
_self	현재 페이지를 대체한다.
_top	로드된 프레임 셋을 대체한다.
name (임의)	새 창이 열리고 창의 이름을 지정한다. ( 새 창에서 열기 )

• windowFeatures ( option )

option	value	설명
fullscreen	yes, no, 1, 0	팝업 전체화면 출력 여부 ( IE에서만 작동 )
toolbar	yes, no, 1, 0	상단 도구창 출력 여부 ( IE, FireFox 에서만 작동 )
location	yes, no, 1, 0	메뉴 아이콘 출력 여부 ( Opera 에서만 작동 )
resizeable	yes, no, 1, 0	팝업창 resize 가능 여부 ( 크롬에서는 작동 안함 )
scrollbars	yes, no, 1, 0	팝업 스크롤바 사용 여부
menubar	yes, no, 1, 0	메뉴 출력 여부
width	number	팝업창의 가로 길이
height	number	팝업창의 세로 길이
top	number	창의 화면 위쪽에서부터의 팝업 위치 지정
left	number	창의 화면 왼쪽에서부터의 팝업 위치 지정

ex) 

//href
window.location.href = "http://naver.com";

//replace
window.location.replace("http://naver.com");

//새 탭에서 열기
window.open("http://naver.com","_blank");

//새 창에서 열기
window.open("http://naver.com","이름",`width=${screen.width*0.7}, height=${screen.height*0.7}`);

 

참조:

https://developer.mozilla.org/en-US/docs/Web/API/Location/href

location.href - Web APIs | MDN

https://developer.mozilla.org/en-US/docs/Web/API/Location/replace

location.replace() - Web APIs | MDN

https://developer.mozilla.org/en-US/docs/Web/API/Window/open

Window.open() - Web APIs | MDN

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-windowopen-%EC%A0%95%EB%A6%AC

[JS] 📚 window.open / close (새창 열기/닫기) 사용법 💯 정리