JavaScript에서 Onclick으로 URL로 이동

1. JavaScript에서 window.open()을 사용하여 URL로 이동
2. JavaScript에서 window.location을 사용하여 URL로 이동

창 개체는 브라우저와 통신하는 데 사용되는 가장 중요한 개체 중 하나입니다. 브라우저의 창을 나타냅니다. 모든 전역 변수, 함수는 창 개체의 구성원이 됩니다. 창의 위치 개체는 현재 페이지 URL을 가져오고 리디렉션할 URL을 변경하는 데 사용됩니다.

오늘 기사에서는 JavaScript에서 onclick을 사용하여 URL로 이동하는 방법을 알아보겠습니다.

JavaScript 창 개체는 두 가지 방법을 제공합니다. 첫 번째는 위치 속성을 사용하는 것이고 두 번째는 open() 메서드를 사용하는 것입니다.

JavaScript에서 window.open()을 사용하여 URL로 이동

지정된 URL/리소스를 지정된 이름의 새 탭이나 기존 브라우저에 로드하는 JavaScript에서 제공하는 Window 인터페이스 방법입니다. 이 메소드는 지정된 URL을 열기 위한 새 창을 생성합니다. window.open() 메소드가 리턴할 때마다 about:blank가 포함됩니다. 현재 스크립트 블록이 실행을 완료하면 실제 URL이 로드됩니다.

JavaScript의 window.open() 구문

window.open(url, windowName, windowFeatures);

매개변수

• url: 유효한 URL, 이미지 경로 또는 브라우저에서 지원하는 기타 리소스를 허용하는 필수 매개변수입니다. 빈 문자열이 전달되면 빈 URL이 있는 새 탭이 열립니다.
• windowName: 브라우징 컨텍스트의 이름을 지정하는 선택적 매개변수입니다. 이것은 창의 제목을 정의하지 않습니다. 또한 이 창 이름에는 공백이 없어야 합니다.
• windowFeatures: 선택적 매개변수입니다. 이 매개변수는 name=value 형식으로 새 탭의 쉼표로 구분된 창 속성을 허용하거나 속성이 부울인 경우 name만 허용합니다. 일부 기능은 창 개체의 기본 위치와 크기입니다.

예제 코드:

<button type="button" id="btn" onclick="openGoogleByMethod()">Open Google</button>

window.open('https://www.google.com');

JavaScript에서 window.location을 사용하여 URL로 이동

Location 개체를 반환하는 window.location의 읽기 전용 속성입니다. 이 개체는 문서의 현재 위치에 대한 정보를 포함합니다. 위치 객체는 href, protocol, host, hostname, port 등과 ​​같은 다른 속성도 포함합니다.

창 개체가 항상 범위 체인의 맨 위에 있기 때문에 window.location의 속성은 location을 사용하여 직접 액세스할 수도 있습니다. 사용자는 다른 URL/리소스를 로드/열기 위해 Location 개체의 href 속성 또는 assign 메서드를 사용할 수 있습니다.

통사론

window.location = URL_PATH;
window.location.href = URL_PATH;
window.location.assign(URL_PATH);

매개변수

• URL_PATH: 열려야 하는 유효한 URL을 허용하는 필수 매개변수입니다. 이 URL은 절대 URL, 상대 URL, 앵커 URL 또는 새 프로토콜일 수 있습니다.

예제 코드:

<button type="button" id="btn" onclick="openGoogle()">Open Google</button>

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