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 }

posted @ 2017-07-20 21:19 hugh.dong 阅读(306) 评论(0) 编辑收藏举报

刷新页面返回顶部

Hugh

You know something and I know nothing.

JavaScript | window浏览器对象模型

公告