浏览器对象模型 (Browser Object Model (BOM))
Windows 尺寸
有三种方法能够确定浏览器窗口的尺寸.
对于 Internet Explorer,Chrome,Firefox,Opera 以及 Safari:
Windows.innerHeight- 浏览器窗口的内部高度 (包括滚动条)
Windows.innerWidth - 浏览器窗口的内部宽度 (包括滚动条)
对于 Internet Explorer 8,7,6,5:
- document.documentElement.clientHeight
- document.documentElement.clientWidth
或者
- document.body.clientHeight
- document.body.clientWidth
其他 Windows 方法
Windows.open()- 打开新窗口
Windows.close()- 关闭当前窗口
Windows.moveTo() - 移动当前窗口
Windows.resizeTo() - 调整当前窗口的尺寸
Windows Screen
Windows.screen 对象在编写时可以不带上 Windows 这个前缀.
screen.availWidth - 可用的屏幕宽度 该属性返回访问者屏幕的宽度, 以像素计, 减去界面特性, 比如窗口任务栏.
screen.availHeight - 可用的屏幕高度 该属性返回访问者屏幕的高度, 以像素计, 减去界面特性, 比如窗口任务栏.
Windows Location
Windows.location 对象用于获得当前页面的地址 (URL), 并把浏览器重定向到新的页面. 该对象在编写时可不使用 Windows 这个前缀, 如:
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 Web 主机的端口 (80 或 443)
location.protocol 返回所使用的 Web 协议 (http:// 或 https://)
Windows Location Href
location.href 属性返回当前页面的 URL.
Windows Location Assign
location.assign() 方法加载新的文档.
如: box2.innerhtml = Windows.location.assign('http://www.guiyinqingyuan.com');
Windows History
Windows.history 对象包含浏览器的历史. 该对象在编写时可不使用 Windows 这个前缀.
history.back() - 与在浏览器点击后退按钮相同 history.back() 方法加载历史列表中的前一个 URL.
history.forward() - 与在浏览器中点击向前按钮相同 history forward() 方法加载历史列表中的下一个 URL.
附: 除了 history.back() 和 history.forward() 还可以通过 history.go() 来实现前进和后退
- // 前进
- function lia(){
- history.go(1); // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面
- }
- // 后退
- function hua(){
- history.go(-1); // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面
- }
- Windows Navigator (navigator 对象的信息具有误导性, 不应该被用于检测浏览器版本)
Windows.navigator 对象包含有关访问者浏览器的信息. 该对象在编写时可不使用 Windows 这个前缀.
- <div id="example">
- </div>
- <script>
- txt = "<p > 浏览器代号:" + navigator.appCodeName + "</p>";
- txt += "<p > 浏览器名称:" + navigator.appName + "</p>";
- txt += "<p > 浏览器版本:" + navigator.appVersion + "</p>";
- txt += "<p > 启用 Cookies:" + navigator.cookieEnabled + "</p>";
- txt += "<p > 硬件平台:" + navigator.platform + "</p>";
- txt += "<p > 用户代理:" + navigator.userAgent + "</p>";
- txt += "<p > 用户代理语言:" + navigator.systemLanguage + "</p>";
- document.getElementById("example").innerHTML = txt;
- </script>
注意: navigator 对象的信息具有误导性, navigator 数据可被浏览器使用者更改, 一些浏览器对测试站点会识别错误, 浏览器无法报告晚于浏览器发布的新操作系统
JavaScript 弹窗
可以在 JavaScript 中创建三种消息框: 警告框, 确认框, 提示框.
警告框 Windows.alert() 方法可以不带上 Windows 对象, 直接使用 alert() 方法.
确认框 Windows.confirm() 方法可以不带上 Windows 对象, 直接使用 confirm() 方法.
提示框 Windows.prompt() 方法可以不带上 Windows 对象, 直接使用 prompt() 方法.
JavaScript 计时事件
JavaScript 通过设定一个时间间隔之后来执行代码, 我们称之为计时事件
在 JavaScritp 中使用计时事件的两个关键方法是:
setInterval() - 间隔指定的毫秒数不停地执行指定的代码.
setTimeout() - 在指定的毫秒数后执行指定代码.
注意: setInterval() 和 setTimeout() 是 HTML DOM Windows 对象的两个方法.
setInterval() 方法
setInterval() 间隔指定的毫秒数不停地执行指定的代码
Windows.setInterval() 方法可以不使用 Windows 前缀, 直接使用函数 setInterval().
setInterval() 第一个参数是函数 (function), 第二个参数间隔的毫秒数, 1000 毫秒是一秒.
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码.
Windows.clearInterval() 方法可以不使用 Windows 前缀, 直接使用函数 clearInterval().
要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量:
- // clearInterval 点击停止
- var hua = setInterval(function(){
- tu()
- }, 1000);
- function tu(){
- box.innerHTML = new Date().toLocaleTimeString();
- }
- btn1.onclick = function(){
- clearInterval(hua);
- }
setTimeout() 方法
setTimeout() 的使用方法和 setInterval() 方法差不多, 区别在于 setTimeout() 使用一次之后就失效了, setInterval() 方法则是一直循环使用
- // setTimeout() 方法执行一次后失效
- var hermit = setTimeout(function(){
- lxlx()
- }, 5000);
- function lxlx(){
- box1.innerHTML = new Date().toLocaleTimeString() + '如果你在 5 秒之内没有点击阻止, 我才能显示';
- }
clearTimeout() 方法
clearTimeout() 方法用于停止执行 setTimeout() 方法的函数代码. 但是必须在 setTimeout() 方法执行之前点击, 因为 setTimeout() 方法执行一次, 之后就自动失效了
- var hermit = setTimeout(function(){
- lxlx()
- }, 5000);
- function lxlx(){
- box1.innerHTML = new Date().toLocaleTimeString() + '如果你在 5 秒之内没有点击阻止, 我才能显示';
- }
- btn2.onclick = function(){
- clearTimeout(hermit);
- }
- JavaScript Cookie
Cookie 用于存储 Web 页面的用户信息, Cookie 是一些数据, 存储于你电脑上的文本文件中.
当 Web 服务器向浏览器发送 Web 页面时, 在连接关闭后, 服务端不会记录用户的信息.
Cookie 的作用就是用于解决 "如何记录客户端的用户信息": 当用户访问 Web 页面时, 他的名字可以记录在 cookie 中. 在用户下一次访问该页面时, 可以在 cookie 中读取用户访问记录.
Cookie 以名 / 值对形式存储, 如: username = John Doe
当浏览器从服务器上请求 Web 页面时, 属于该页面的 cookie 会被添加到该请求中. 服务端通过这种方式来获取用户的信息.
使用 JavaScript 创建 Cookie
JavaScript 可以使用 document.cookie 属性来创建 , 读取, 及删除 cookie.
来源: http://www.bubuko.com/infodetail-3019623.html