JavaScript에서 웹 페이지로 리디렉션

1. JavaScript는location.href()를 사용하여 웹 페이지를 리디렉션합니다
2. JavaScript는location.replace()를 사용하여 웹 페이지를 리디렉션합니다
3. 3. JavaScript는location.assign()을 사용하여 웹 페이지를 리디렉션합니다
4. 4. 앵커 요소를 동적으로 생성하여 웹 페이지를 리디렉션하는 JavaScript
5. 결론

JavaScript에는 사용자를 다시 라우팅하는 다양한 방법이 있습니다. 사이트에 어떤 종류의 리디렉션 동작이 있어야하는지에 대한 비즈니스 요구 사항에 따라 다릅니다. 다음과 같은 방법으로 사용자를 리디렉션 할 수 있습니다.

1. location.href()
2. location.replace()
3. location.assign()
4. 앵커 요소를 동적으로 생성

JavaScript는location.href()를 사용하여 웹 페이지를 리디렉션합니다

리디렉션을 위해Document및Window개체와 함께location인터페이스를 사용합니다. 일반적으로window.location.href는 현재 페이지의 URL을 반환합니다. 예를 들어 다음 코드를 실행하면 페이지 URL이 표시됩니다.

console.log(window.location.href)

출력:

"https://www.delftstack.com/"

트릭은window.location.href에 다른 URL을 할당하여이 URL을 바꾸는 것입니다. 브라우저가 URL로 지정된 페이지를로드하여 리디렉션하도록합니다. 사이트 히스토리 스택 측면에서이 방법은 현재 참조 URL을 변경합니다. 다음 코드는DelfStack의 방법 페이지로 이동합니다.

window.location.href = 'https://www.delftstack.com/howto/';

비고 :

1. 새 URL이로드되면 브라우저 뒤로 버튼으로 이전 웹 페이지에 액세스 할 수 있습니다.
2. 리디렉션에 가장 일반적으로 사용되는 방법입니다.

JavaScript는location.replace()를 사용하여 웹 페이지를 리디렉션합니다

웹 페이지로 영구적으로 이동하려면location.replace를 사용하십시오. 차이점은location.replace가 현재 URL을 새 URL로 대체한다는 것입니다. 따라서 사용자는 이전 URL로 돌아갈 수 없습니다. 브라우저 히스토리 스택 측면에서이 메서드는 마지막 웹 페이지 URL을 팝하고 값에 URL을 푸시합니다.

window.location.replace('https://www.delftstack.com');

이를 실행하면https://www.delftstack.com사이트가로드됩니다.

비고 :

1. 필요한 경우에만이 방법을 사용하는 것이 좋습니다.
2. 이 방법으로는 이전 링크로 돌아갈 수 없습니다. 따라서 좋은 사용자 경험이 아닐 수 있습니다.

3. JavaScript는location.assign()을 사용하여 웹 페이지를 리디렉션합니다

location.replace()와 마찬가지로assign()메서드는 현재 링크가 브라우저 기록에 남아 있다는 차이점이 있습니다. 따라서 사용자는 브라우저 뒤로 버튼을 사용하여 이전 페이지로 돌아갈 수 있습니다. 이 메서드는 대상 URL도 매개 변수로 사용합니다.

window.location.assign('https://www.delftstack.com');

4. 앵커 요소를 동적으로 생성하여 웹 페이지를 리디렉션하는 JavaScript

이전 브라우저, 특히 버전 8 이하의 Internet Explorer에서는 위치 인터페이스가 지원되지 않습니다. 따라서 앵커 태그 (<a>)를 동적으로 생성하고 대상 URL로href속성을 설정합니다. 앞서 언급했듯이 앵커 태그는이를 호출하기 위해 사용자 상호 작용이 필요한 수동 요소입니다. 따라서 리디렉션이 작동하도록 코드에서 클릭 이벤트가 트리거됩니다.

let targetURL = 'https://www.delftstack.com';
let newURL = document.createElement('a');
newURL.href = targetURL;
document.body.appendChild(newURL);
newURL.click();

여기에서 다음과 같은 방법으로 리디렉션을 수행합니다.

1. 앵커 태그 요소 생성document.createElement('a');
2. new URL newURL.href = targetURL을 사용하여href속성 설정
3. document.body.appendChild(newURL)를 사용하여 동적으로 생성 된 태그를 DOM 노드에 첨부
4. 마지막으로 사용자 클릭newURL.click()을 에뮬레이션하여 호출합니다.

브라우저는 새 URL을로드합니다.

결론

비즈니스 요구 사항에 따라 메타 새로 고침 방법을 사용하여 사용자가 유지 관리중인 사이트 웹 페이지를 방문하자마자 리디렉션하는 것이 좋습니다. 탐색이 사용자 클릭을 기반으로하는 경우 앵커 태그를 사용하는 것은 매우 일반적입니다. JavaScript의 위치 인터페이스 메서드 인window.location.href및window.location.assign()을 사용하여 프로그래밍 방식으로 사용자를 새 URL로 보낼 수 있습니다.