一,BOM
- 浏览器对象模型(Browser Object Model (BOM))
二,window对象
- 所有浏览器都支持 window 对象。它表示浏览器窗口。
- 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
- 全局变量是 window 对象的属性;全局函数是 window 对象的方法。
- window常可以省略,window.document.getElementById("header");等价于document.getElementById("header");
三,window尺寸
- 浏览器当前的尺寸,伸缩后值变化
- 涵盖所有浏览器
-
/*1,当前浏览器的实际宽度和高度*/ var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; x=document.getElementById("demo"); x.innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。"
三,Window Screen尺寸
- 浏览器在窗口的最大尺寸,每一台电脑值固定
- screen.availWidth - 可用的屏幕宽度
- screen.availHeight - 可用的屏幕高度
-
/*2,当前浏览器的可用宽度和高度*/ document.write("可用宽度: " + screen.availWidth); document.write("可用高度: " + screen.availHeight);
四,window.location
- window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面
- 返回的中文路径可以使用decodeURI来转换中文
- location.hostname 返回 web 主机的域名
- location.pathname 返回当前页面的路径和文件名
- location.port 返回 web 主机的端口 (80 或 443)
- location.protocol 返回所使用的 web 协议(http:// 或 https://)
五,Window History
- window.history 对象包含浏览器的历史
- history.back() - 与在浏览器点击后退按钮相同
- history.forward() - 与在浏览器中点击向前按钮相同
- history.go(-1):等效于history.back()
- history.go(1):等效于history.forward()
-
/*4,Window History,在编写时可不使用 window 这个前缀*/ function goBack() { window.history.back(); // 或者以下方法: // history.go(-1); } function goForward() { window.history.forward(); // 或者以下方法: // history.go(1); }
六,Window.navigator
- window.navigator 对象包含有关访问者浏览器的信息
- 浏览器代号: " + navigator.appCodeName + "</p>";
- 浏览器名称: " + navigator.appName + "</p>";
- 浏览器版本: " + navigator.appVersion + "</p>";
- 启用Cookies: " + navigator.cookieEnabled + "</p>";
- 硬件平台: " + navigator.platform + "</p>";
- 用户代理: " + navigator.userAgent + "</p>";
- 用户代理语言: " + navigator.systemLanguage + "</p>";
- 来自 navigator 对象的信息具有误导性,不应该被用于检测浏览器版本
- navigator 数据可被浏览器使用者更改
- 一些浏览器对测试站点会识别错误
- 浏览器无法报告晚于浏览器发布的新操作系统
- 由于不同的浏览器支持不同的对象,您可以使用对象来检测浏览器
- 例子:if (window.opera) {...some action...}
七,Window Screen弹窗
- 警示框
- 警告框经常用于确保用户可以得到某些信息。
- 当警告框出现后,用户需要点击确定按钮才能继续进行操作。
- window.alert("sometext");
- 确认框
- 确认框通常用于验证是否接受用户操作。
- 当确认卡弹出时,用户可以点击 "确认" 或者 "取消" 来确定用户操作。
- 当你点击 "确认", 确认框返回 true, 如果点击 "取消", 确认框返回 false。
- window.confirm("sometext");
- 提示框
- 提示框经常用于提示用户在进入页面前输入某个值。
- 当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
- 如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。
- window.prompt("sometext","defaultvalue");
-
//警告框 function myFunction1() { alert("你好,我是一个警告框!"); } //确认框 function myFunction2() { var x; var r = confirm("你好,我是一个确认框!"); if (r==true){ x="你按下了\"确定\"按钮!"; } else{ x="你按下了\"取消\"按钮!"; }; document.getElementById("demo6").innerHTML=x; } //提示框 function myFunction3() { var person=prompt("你好,我是一个提示框!","Harry Potter"); if (person!=null && person!="") { x="你好 " + person + "! 今天感觉如何?"; document.getElementById("demo7").innerHTML=x; } }
八,计时事件
- setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
- setInterval(function(){alert("Hello")},3000);
- clearInterval() 方法用于停止 setInterval() 方法执行的函数代码
- setTimeout() - 在指定的毫秒数后执行指定代码。
- setTimeout(function(){alert("Hello")},3000);
- clearTimeout() 方法用于停止执行setTimeout()方法的函数代码