>  기사  >  웹 프론트엔드  >  페이지 점프 구현을 위한 window.location 개체에 대한 심층 분석

페이지 점프 구현을 위한 window.location 개체에 대한 심층 분석

WBOY
WBOY앞으로
2022-08-05 10:57:583090검색

이 글에서는 페이지 점프를 달성하기 위해 window.location 객체와 관련된 문제를 주로 소개하는 javascript에 대한 관련 지식을 제공합니다. window.location 객체는 현재 페이지의 주소를 획득하고 브라우저를 재설정하는 데 사용됩니다. 새로운 페이지로 이동하여 살펴보겠습니다. 모든 분들께 도움이 되기를 바랍니다.

페이지 점프 구현을 위한 window.location 개체에 대한 심층 분석

【관련 추천: javascript video tutorial, web front-end

window.location 객체는 현재 페이지의 주소(URL)를 얻고 브라우저를 새 페이지로 리디렉션하는 데 사용됩니다.

창 위치 객체는 쓸 때 Window 접두사를 사용할 필요가 없습니다. 몇 가지 예:

  • location.hostname은 웹 호스트의 도메인 이름을 반환합니다.
  • location.pathname은 현재 페이지의 경로와 파일 이름을 반환합니다.
  • location.port는 웹 호스트의 포트를 반환합니다.
  • location.protocol은 반환합니다. 사용된 웹 프로토콜

window location href

Example

현재 페이지의 URL을 반환합니다:

<script type="text/javascript">
	    document.write(location.href);
</script>

위 코드의 출력은 다음과 같습니다:

http://127.0.0.1:8848/7.11/new_file.html

window location pathname

위치 .pathname 속성은 URL의 경로 이름을 반환합니다.

현재 URL의 경로 이름을 반환합니다.

<script type="text/javascript">
		document.write(location.pathname);
</script>

위 코드의 출력은 다음과 같습니다.

/7.11/new_file.html

window location Assign

location.sign() 메서드는 새 문서를 로드합니다. ㅋㅋㅋ

코드 구현 아이디어:

규칙적으로 점프하는 HTML 페이지를 작성하세요.

지정된 초 수를 구하고 1을 빼서 페이지에 씁니다.

초가 0보다 크면 setTimeout()을 사용하여 카운트다운을 반복합니다.

초 수가 0보다 작거나 같으면 location.href를 사용하여 지정된 URL 주소로 이동합니다.
  • 구현 코드는 다음과 같습니다.
  • html 코드:

  • css 코드:

  • js 코드:

달성된 효과:

【 관련 추천:

javascript 비디오 튜토리얼

, web front-end

위 내용은 페이지 점프 구현을 위한 window.location 개체에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제