一張示例代碼圖,供大家參考。
<!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>