首頁 > web前端 > js教程 > 深入淺析window.location物件實現頁面跳轉

深入淺析window.location物件實現頁面跳轉

WBOY
發布: 2022-08-05 10:57:58
轉載
3157 人瀏覽過

這篇文章為大家帶來了關於javascript的相關知識,其中主要介紹了window.location物件實現頁面跳轉的相關問題,window.location物件用於獲得當前頁面的位址,並把瀏覽器重新導向到新的頁面,下面一起來看一下,希望對大家有幫助。

深入淺析window.location物件實現頁面跳轉

【相關推薦:javascript影片教學web前端

window.location物件用於取得目前頁面的位址(URL),並將瀏覽器重新導向到新的頁面。

window location 物件在撰寫時可不使用Window這個前綴。一些範例:

  • location.hostname回傳web主機的網域名稱
  • location.pathname傳回目前頁面的路徑和檔名
  • location.port回傳web主機的連接埠
  • location.protocol傳回所使用的web協定

# window location href

#範例

傳回目前頁面的URL:

<script type="text/javascript">
	    document.write(location.href);
</script>
登入後複製

以上程式碼輸出為:

http://127.0.0.1:8848/7.11/new_file.html
登入後複製

window location pathname 

#location.pathname屬性回傳URL的路徑名。

範例

傳回目前URL的路徑名稱:

<script type="text/javascript">
		document.write(location.pathname);
</script>
登入後複製

以上程式碼輸出為:

/7.11/new_file.html
登入後複製

window location Assign

location.assign()方法載入新的文件。

範例

載入一個新的文件:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" name="" id="" value="跳转到百度" onclick="newDoc()"/>
		<script type="text/javascript">
			function newDoc(){
				window.location.assign('https://www.baidu.com')
			}
		</script>
	</body>
</html>
登入後複製

使用javascript實作頁面定時跳轉---location對象

要求實現以下效果:

程式碼實作思路:

  • 編寫定時跳轉的HTML頁面。

  • 取得指定的秒數,並減1寫入頁面。

  • 當秒數大於0時,利用setTimeout()循環倒數。

  • 當秒數小於等於0時,利用location.href跳到指定的URL位址中。

 實作程式碼如下:

 html程式碼:

css程式碼:

js程式碼:

實作效果:

 

 

【相關推薦:javascript影片教學web前端

以上是深入淺析window.location物件實現頁面跳轉的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板