JavaScript | window瀏覽器對象模型

Js Window - 獲取瀏覽器視窗全局變數是window對象的屬性全局函數是window對象的方法 HTML DOM的document是window對象屬性之一 window.document.getElementById("header"); document.getElementById ...

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 }