> 웹 프론트엔드 > JS 튜토리얼 > 페이지 점프 구현을 위한 window.location 개체에 대한 심층 분석

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

WBOY
풀어 주다: 2022-08-05 10:57:58
앞으로
3136명이 탐색했습니다.

이 글에서는 페이지 점프를 달성하기 위해 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으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿