<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>瀏覽器對象</title>
</head>
<body>
<div id="app">
</div>
<!-- window對象不但充當全局作用域,而且表示瀏覽器寬高 -->
<script type="text/javascript">
// innerWidth 和 innerHeight 屬性,可以獲取瀏覽器窗口的內(nèi)部寬度和高度;去除,菜單 邊框 工具等占位元素后,用于顯示網(wǎng)頁的純凈高度
console.log(window.innerWidth+" "+window.innerHeight);// 1536 723
console.log(window.outerWidth+" "+window.outerHeight);// 1536 824 可以獲取瀏覽器整個窗口的高度和寬度
// navigator對象,表示瀏覽器信息,最常用的屬性;(但是navigator的信息可以很容易的被用戶修改,所以讀取的值不一定是正確的)
// navigator.appName : 瀏覽器名稱
// navigator.appVersion: 瀏覽器版本
// navigator.lanuage: 瀏覽器設置的語言
// navigator.platform : 操作系統(tǒng)類型
// navigator.userAgent: 瀏覽器設定的user-Agent字符串
console.log("appName:"+navigator.appName);
console.log("appVersion:"+navigator.appVersion);
console.log("lanuage:"+navigator.language);
console.log("paltform:"+navigator.platform);
console.log("user-Agent:"+navigator.userAgent);
// 正確的方法是充分利用JavaScript對不存在屬性返回undefined的特性，直接用短路運算符||計算
// screen表示屏幕的信息,常用的如下
// screen.width 屏幕寬度,以像素為單位
// screen.height 屏幕高度,以像素為單位
// screen.colorDepth: 返回顏色位數(shù)
console.log("screen size "+screen.width+" "+screen.height);// 1536 864
// location對象表示當前頁面的url信息,例如一個完整的url(可以使用location.href獲取,)
// https://baike.baidu.com/item/%E7%BD%91%E6%99%AF/70176?fr=aladdin
console.log(location.href);//http://127.0.0.1:8848/HBuilderProjects/WebStudy/js/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AF%B9%E8%B1%A1.html
// 想要獲取URL 各部分的值,可以這么寫
console.log(location.protocol);//http:
console.log(location.host);//127.0.0.1:8848
console.log(location.port);//8848
console.log(location.pathname);///HBuilderProjects/WebStudy/js/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AF%B9%E8%B1%A1.html
// console.log(location.search);
// console.log(location.hash);
// PS 要加載一個新頁面,可以調(diào)用location.assign("..."); 要重新加載當前頁面,調(diào)用location.reload()方法
// if(confirm('重新加載當前頁面'+location.href+"?")){
// location.reload();
// }else{
// // location.assign("http://www.baidu.com");
// }
//? document對象;表示當前頁面
// document的title屬性,是從HTML文檔中的,<title>xxxx</title>讀取的,但是可以動態(tài)改變
document.title = "我是document修改標題";
var app = document.getElementById("app");
app.innerHTML = "測試插入文檔內(nèi)容";
// document對象還有一個屬性cookie,可以獲取當前頁面的cookie
// cookie是由服務器發(fā)送的key-value標識符,因為HTTP協(xié)議是無狀態(tài)的,但是服務器要區(qū)分到底是哪一個用戶發(fā)來的請求;就可以用Cookie來區(qū)分;
// 當一個用戶成功登陸后,服務器發(fā)送一個cookie給瀏覽器,例如user=ABC123xyz(加密字符串),之后瀏覽器訪問該網(wǎng)站時,會在請求頭上附上這個cookie
// 服務器根據(jù)cookie即可區(qū)分出用戶,Cookie還可以存儲網(wǎng)站的一些設置,例如頁面顯示的語言等;
// javaScript可以通過document.cookie讀取到當前頁面的cookie:
// document.cookie;
console.log(document.cookie);
// 由于js中能讀取到cookie,而用戶的登陸信息通常也在cookie中,這就造成了巨大的安全隱患,這是因為在html頁面中引入的第三方js代碼是允許的;
// 為了解決這個問題,服務器在設置cookie的時候,可以使用httpOnly,設置了httpOnly的cookie將不能被js讀取,為了安全服務器在設置cookie的時候,
// 應該堅持使用httpOnly
// history: 對象保存了瀏覽器的歷史記錄,js可以調(diào)用history對象的back或forward,相當于用戶點擊了瀏覽器的后退或前進的按鈕
// 現(xiàn)代瀏覽器大量使用ajax和頁面交互,簡單粗暴的調(diào)用history.back可能會讓用戶感到憤怒;
// 任何情況下,都不應該使用history對象;
</script>
</body>
</html>
