JavaScript | window瀏覽器對象模型
Js Window - 獲取瀏覽器窗口
- 全局變量是window對象的屬性
- 全局函數是window對象的方法
-
HTML DOM的document是window對象屬性之一
window.document.getElementById("header"); === document.getElementById("header");
|
window.innerHeight window.innerWidth |
獲取瀏覽器尺寸 IE/Chrome/Firefox/Opera/Safari |
|
document.documentElement.clientHeight document.documentElement.clientWidth |
獲取瀏覽器尺寸 IE8/7/6/5 |
|
document.body.clientHeight document.body.clientWidth |
獲取瀏覽器尺寸 其他 |
|
window.open() |
打開新窗口 |
|
window.close() |
關閉當前窗口 |
|
window.moveTo() |
移動當前窗口 |
|
window.resizeTo() |
調整當前窗口的尺寸 |
獲取window尺寸
1 var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;2 var heigh = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 3 console.log(width + "," + heigh);
————————————————————————————————————————————
Js Screen - 獲取屏幕的信息
|
screen.availWidth |
獲取屏幕寬度 |
|
screen.availHeight |
獲取屏幕高度 |
————————————————————————————————————————————
Js Location - 獲取頁面當前位置
|
location.href |
返回當前鏈接 |
|
location.hostname |
返回 web 主機的域名 |
|
location.pathname |
返回當前頁面的路徑和文件名 |
|
location.port |
返回 web 主機的端口 （80 或 443） |
|
location.protocol |
返回所使用的 web 協議（http:// 或 https://） |
|
location.assign("http://www.xxx.cn") |
加載新的文檔 |
————————————————————————————————————————————
Js History - 獲取瀏覽器歷史
|
history.forward(); |
前進 |
|
history.back(); |
後退 |
————————————————————————————————————————————
Js Navigator - 訪問者瀏覽器的信息
p.s.來自 navigator 對象的信息具有誤導性，不應該被用於檢測瀏覽器版本，這是因為：navigator 數據可被瀏覽器使用者更改，瀏覽器無法報告晚於瀏覽器發布的新操作系統。
使用對象檢測可用來嗅探不同的瀏覽器。由於不同的瀏覽器支持不同的對象，您可以使用對象來檢測瀏覽器。例如，由於只有 Opera 支持屬性 "window.opera"，您可以據此識別出 Opera。
|
navigator.appCodeName |
瀏覽器內核 |
|
navigator.appName |
瀏覽器名稱 |
|
navigator.appVersion |
內核版本 |
|
navigator.cookieEnabled |
Cookie是否開啟 |
|
navigator.platform |
系統平臺 |
|
navigator.userAgent |
瀏覽器代理 |
|
navigator.systemLanguage |
語言 |
————————————————————————————————————————————
Js PopupAlert - 消息框
|
alert("文本") |
警告框 |
|
confirm("文本") |
確認框 |
|
prompt("文本","默認值") |
提示框 |
提示框樣例
1 var name = prompt("please input your name:", "hugh dong") 2 if (name != null && name != "") { 3 document.write("hello," + name); 4 }
————————————————————————————————————————————
Js Timing - 計時事件
|
setTimeout() |
未來的某時執行代碼 |
|
clearTimeout() |
取消setTimeout() |
時鐘樣例
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <title></title> 6 <!-- <script type="text/javascript" src="test.js"></script> --> 7 </head> 8 9 <body> 10 <div> 11 <p id="txt"></p> 12 <input type="button" value="stop" onclick="stop()"> 13 </div> 14 <script type="text/javascript"> 15 // 調用timeOut()5秒後彈出alert 16 function timeOut() { 17 var t1 = setTimeout("alert(‘5 second‘)", 5000); 18 } 19 // timeOut(); 20 // ********************************************************************* 21 // 秒表計時,控制臺每秒輸出秒數 22 var c = 0; 23 24 function timedCount() { 25 console.log(c); 26 c = c + 1 27 t2 = setTimeout("timedCount()", 1000) 28 } 29 timedCount(); 30 // ********************************************************************* 31 // 簡單時鐘 32 function startTime() { 33 var today = new Date() 34 var h = today.getHours() 35 var m = today.getMinutes() 36 var s = today.getSeconds() 37 m = checkTime(m) 38 s = checkTime(s) 39 document.getElementById(‘txt‘).innerHTML = h + ":" + m + ":" + s; 40 t3 = setTimeout(‘startTime()‘, 500) 41 } 42 43 function checkTime(i) { 44 if (i < 10) { i = "0" + i } 45 return i 46 } 47 startTime(); 48 // ********************************************************************* 49 // 停止時鐘 50 function stop() { 51 clearTimeout(t3); 52 } 53 </script> 54 </body> 55 56 </html>
————————————————————————————————————————————
Js Cookies
- 名字 cookie
- 密碼 cookie
- 日期 cookie
Cookie創建樣例
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <title></title> 6 <script type="text/javascript" src="test.js"></script> 7 </head> 8 9 <body onload="checkCookie()"> 10 </body> 11 12 </html>
1 // 獲取cookie 2 function getCookie(c_name) { 3 if (document.cookie.length > 0) { 4 // 檢索cookie中的內容 5 c_start = document.cookie.indexOf(c_name + "="); 6 if (c_start != -1) { 7 c_start = c_start + c_name.length + 1; 8 c_end = document.cookie.indexOf(";", c_start); 9 if (c_end == -1) 10 c_end = document.cookie.length; 11 // 姓名子串解碼 12 return unescape(document.cookie.substring(c_start, c_end)); 13 } 14 } 15 return ""; 16 } 17 18 // 創建cookie,輸入姓名,值,密碼 19 function setCookie(c_name, value, expiredays) { 20 // 獲取當前時間 21 var exdate = new Date(); 22 // 根據當前時間的‘天‘+過期天數,建立新的天數(秒單位) 23 exdate.setDate(exdate.getDate() + expiredays); 24 // 創建cookie內容 25 document.cookie = c_name + "=" + escape(value) + 26 ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString()); 27 } 28 29 function checkCookie() { 30 username = getCookie(‘username‘); // 獲取cookie 31 // 如果cookie存在則彈窗歡迎 32 if (username != null && username != "") { 33 alert(‘Welcome again ‘ + username + ‘!‘); 34 } 35 // cookie不存在則創建cookie 36 else { 37 // 彈窗輸入用戶名 38 username = prompt(‘Please enter your name:‘, ""); 39 // 如果用戶名不為空則創建cookie 40 if (username != null && username != "") { 41 setCookie(‘username‘, username, 365); 42 } 43 } 44 }
JavaScript | window瀏覽器對象模型