[JavaScript] 리다이렉션, 새 창 열기

1. Location

 

나. location.href

1. 웹 브라우저의 현재 URL을 가져오거나
2. 새 URL로 페이지를 리디렉션 할 때

 

location.href가 사용된다.

 

이를 통해 사용자는 현재 페이지의 URL을 알 수 있고, 필요한 경우 다른 페이지로 이동할 수 있다.

// 현재 페이지의 URL을 반환
console.log(location.href);

// 새로운 페이지로 리디렉션
location.href = '<https://www.example.com>';

 

---

나. location.replace()

 

location.replace() 메소드는 현재 문서를 새 URL로 대체한다.

 

이 메소드는 브라우저의 히스토리에 현재 페이지를 남기지 않는다.

 

즉, 뒤로 가기 버튼을 눌러도 원래 페이지로 돌아갈 수 없다.

 

location.replace('<https://www.example.com>');

 

---

다. location.href와 location.replace()의 차이점

 

브라우저의 히스토리에 어떤 영향을 미치는지입니다.

• location.href를 사용하여 페이지를 리디렉션 하면, 원래 페이지는 브라우저의 히스토리에 남아있어 뒤로 가기 버튼을 통해 이동할 수 있다.
• location.replace()를 사용하면 원래 페이지는 히스토리에서 제거되므로, 사용자는 뒤로 가기 버튼을 통해 이전 페이지로 돌아갈 수 없다.

 

Location: href property - Web APIs | MDN

 

---

2. open, opener

 

가. open()

let newWindow = window.open("url", "Window_Name", "width=500, height=500");

• window.open()
  : 함수는 새로운 브라우저 창을 연다.
  : URL, 이름, 창의 스펙을 인자로 받는다.
  : 창의 스펙에는 창의 크기, 위치, 스크롤 바의 유무 등을 설정할 수 있다.
  : 이 함수는 새로 연 창의 참조를 반환한다.

 

---

나. opener

let parentURL = window.opener.location.href;

• window.opener : 속성은 현재 창을 연 창(부모 창)에 대한 참조를 가지고 있다.

window.open() 함수를 통해 새로운 창을 연 경우, 새 창에서 부모 창에 접근하려면 window.opener를 사용하면 된다.

 

---