瀏覽器常用對象使用Demo

一張示例代碼圖,供大家參考。

 

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>瀏覽器對象研究</title>
		<script>
			// window 瀏覽器窗口對象,顯示瀏覽器內部寬度和高度
			alert("window inner size:" + window.innerWidth + "x" + window.innerHeight);
			
			//navigator表示瀏覽器的信息
			console.log("browser name:" + navigator.appName);
			console.log("browser version:" + navigator.appVersion);
			console.log("browser language:" + navigator.language);
			console.log("browser platform:" + navigator.platform);
			console.log("browser userAgent:" + navigator.userAgent);
			
			//screen 表示屏幕的信息
			alert("screen size:" + screen.width + "x" + screen.height);
			
			//location 表示當前頁面的URL信息
			console.log("location URL :" + location.href);
			
			//location.assign("http://www.baidu.com");//加載一個新頁面
			//location.reload();//重載當前頁面
			
			//document 表示當前頁面,由於HTML在瀏覽器中以DOM形式表示爲樹形結構,document對象就是整個DOM樹的根節點。
			document.title = "瀏覽器對象示例!";
			
			//要查找DOM樹的某個節點,需要從document對象開始查找。最常用的查找是根據ID和Tag Name。
			//用document對象提供的getElementById()和getElementsByTagName()可以按ID獲得一個DOM節點和按Tag名稱獲得一組DOM節點;
			console.log("document cookie:" + document.cookie);//存在第三方js調用當前頁面cookie風險,服務器寫cookie的時候可以設置httpOnly
			
			//history 保存了瀏覽器的歷史記錄,JavaScript可以調用history對象的back()或forward (),相當於用戶點擊了瀏覽器的“後退”或“前進”按鈕,用戶體驗非常不好,建議別用。
		</script>
	</head>
	<body>
	</body>
</html>

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章