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 }
