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尺寸

 var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

 var heigh = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

 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("文本","默认值")	提示框

提示框样例

 var name = prompt("please input your name:", "hugh dong")

 if (name != null && name != "") {

     document.write("hello," + name);

 }

————————————————————————————————————————————

Js Timing - 计时事件

setTimeout()	未来的某时执行代码
clearTimeout()	取消setTimeout()

时钟样例

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <!-- <script type="text/javascript" src="test.js"></script> -->

 </head>

 <body>

     <div>

         <p id="txt"></p>

         <input type="button" value="stop" onclick="stop()">

     </div>

     <script type="text/javascript">

     // 调用timeOut()5秒后弹出alert

     function timeOut() {

         var t1 = setTimeout("alert('5 second')", 5000);

     }

     // timeOut();

     // *********************************************************************

     // 秒表计时,控制台每秒输出秒数

     var c = 0;

     function timedCount() {

         console.log(c);

         c = c + 1

         t2 = setTimeout("timedCount()", 1000)

     }

     timedCount();

     // *********************************************************************

     // 简单时钟

     function startTime() {

         var today = new Date()

         var h = today.getHours()

         var m = today.getMinutes()

         var s = today.getSeconds()

         m = checkTime(m)

         s = checkTime(s)

         document.getElementById('txt').innerHTML = h + ":" + m + ":" + s;

         t3 = setTimeout('startTime()', 500)

     }

     function checkTime(i) {

         if (i < 10) { i = "0" + i }

         return i

     }

     startTime();

     // *********************************************************************

     // 停止时钟

     function stop() {

         clearTimeout(t3);

     }

     </script>

 </body>

 </html>

————————————————————————————————————————————

Js Cookies

名字 cookie
密码 cookie
日期 cookie

Cookie创建样例

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <script type="text/javascript" src="test.js"></script>

 </head>

 <body onload="checkCookie()">

 </body>

 </html>

 // 获取cookie

 function getCookie(c_name) {

     if (document.cookie.length > 0) {

         // 检索cookie中的内容

         c_start = document.cookie.indexOf(c_name + "=");

         if (c_start != -1) {

             c_start = c_start + c_name.length + 1;

             c_end = document.cookie.indexOf(";", c_start);

             if (c_end == -1)

                 c_end = document.cookie.length;

             // 姓名子串解码

             return unescape(document.cookie.substring(c_start, c_end));

         }

     }

     return "";

 }

 // 创建cookie,输入姓名,值,密码

 function setCookie(c_name, value, expiredays) {

     // 获取当前时间

     var exdate = new Date();

     // 根据当前时间的'天'+过期天数,建立新的天数(秒单位)

     exdate.setDate(exdate.getDate() + expiredays);

     // 创建cookie内容

     document.cookie = c_name + "=" + escape(value) +

         ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());

 }

 function checkCookie() {

     username = getCookie('username'); // 获取cookie

     // 如果cookie存在则弹窗欢迎

     if (username != null && username != "") {

         alert('Welcome again ' + username + '!');

     }

     // cookie不存在则创建cookie

     else {

         // 弹窗输入用户名

         username = prompt('Please enter your name:', "");

         // 如果用户名不为空则创建cookie

         if (username != null && username != "") {

             setCookie('username', username, 365);

         }

     }

 }

巴特西

JavaScript | window浏览器对象模型

最新文章

热门文章