首页 > 代码库 > JavaScript | window浏览器对象模型

JavaScript | window浏览器对象模型

2024-11-01 05:01:02   209人阅读

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="http://www.mamicode.com/test.js"></script> -->
 7 </head>
 8 
 9 <body>
10     <div>
11         <p id="txt"></p>
12         <input type="button" value="http://www.mamicode.com/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="http://www.mamicode.com/test.js"></script>
 7 </head>
 8 
 9 <body onl oad="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浏览器对象模型


联系
我们