> 웹 프론트엔드 > 프런트엔드 Q&A > 자바스크립트에서 새 페이지를 팝업하는 방법

자바스크립트에서 새 페이지를 팝업하는 방법

PHPz
풀어 주다: 2023-04-21 09:42:55
원래의
3653명이 탐색했습니다.

웹 개발에서 페이지로 이동하는 작업은 자주 사용되는 작업인데, JavaScript에서 이 기능을 쉽게 구현할 수 있습니다. 다음으로 새 페이지를 팝업하고 JavaScript를 통해 점프를 구현하는 작업을 소개합니다.

1. 새 페이지 팝업

새 페이지를 팝업하려면 다음 두 가지 방법을 사용할 수 있습니다.

1 window.open() 메서드를 통해

window.open() 메서드는 새 창을 엽니다. 브라우저 또는 탭 페이지의 경우 구문은 다음과 같습니다.

window.open(url, name, specs, replace);
로그인 후 복사

여기서,

  • url은 열려는 페이지의 URL입니다.
  • name은 창이나 탭의 이름입니다. 이름을 지정하면 같은 이름을 가진 모든 창이나 탭이 같은 창이나 탭에서 열립니다. 이름을 지정하지 않거나 빈 문자열을 지정하면 매번 새 창이나 탭이 열립니다.
  • specs는 새 창이나 탭의 너비, 높이, 위치 등을 지정할 수 있는 쉼표로 구분된 속성 집합입니다. 이 매개변수는 선택사항입니다.
  • replace는 현재 페이지의 URL을 바꿀지 여부를 나타내는 부울 값입니다. true이면 새 페이지가 현재 페이지를 대체하고, 그렇지 않으면 새 창이나 탭에서 열립니다. 이 매개변수도 선택사항입니다.

예를 들어 다음 코드를 사용하여 새 창을 열고 Baidu 홈페이지로 이동할 수 있습니다.

window.open("https://www.baidu.com", "baidu");
로그인 후 복사

2 window.location.href 속성을 통해

window.location.href 속성을 얻을 수 있습니다. 현재 페이지의 URL을 설정합니다. 이 속성을 새 URL로 설정하면 브라우저는 즉시 해당 URL로 이동하여 새 페이지를 팝업하는 효과를 얻습니다.

예를 들어, 다음 코드를 사용하여 브라우저가 Baidu의 홈페이지로 점프하도록 할 수 있습니다:

window.location.href = "https://www.baidu.com";
로그인 후 복사

2. 페이지 점프 구현

새 페이지 팝업 방법을 알고 나면 점프 구현 방법도 알아야 합니다. .

1. window.location.href 속성을 통해

window.location.href 속성을 설정하여 페이지 점프를 달성할 수 있습니다. 예를 들어, 다음 코드는 현재 페이지를 Baidu의 뉴스 페이지로 이동할 수 있습니다:

window.location.href = "https://news.baidu.com/";
로그인 후 복사

2. window.open() 메소드를 통해

window.open() 메소드를 사용하여 페이지 점프를 달성할 수도 있습니다. 예를 들어 다음 코드는 Baidu의 뉴스 페이지를 새 창이나 탭에서 열 수 있습니다.

window.open("https://news.baidu.com", "baidu");
로그인 후 복사

현재 페이지에서 새 페이지로 이동하려면 window.location.href 속성을 사용해야 합니다. . 새 창이나 탭에서 새 페이지를 열려면 window.open() 메서드를 사용할 수 있습니다.

3. 요약

위의 소개를 통해 JavaScript를 사용하여 새 페이지를 팝업하고 점프 동작을 구현하는 방법을 배웠습니다. window.location.href 속성을 사용하든 window.open() 메서드를 사용하든 이는 특정 비즈니스 요구에 따라 특정 용도를 선택할 수 있는 매우 편리한 방법입니다.

위 내용은 자바스크립트에서 새 페이지를 팝업하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿