浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器 "对话".
浏览器对象模型 (BOM):
浏览器对象模型 (Browser Object Model (BOM)) 尚无正式标准.
由于现代浏览器已经 (几乎) 实现了 JavaScript 交互性方面的相同方法和属性, 因此常被认为是 BOM 的方法和属性.
Windows 对象:
所有浏览器都支持 Windows 对象. 它表示浏览器窗口.
http://www.iis7.com/a/lm/gjcpmcx/
所有 JavaScript 全局对象, 函数以及变量均自动成为 Windows 对象的成员.
全局变量是 Windows 对象的属性.
全局函数是 Windows 对象的方法.
甚至 html DOM 的 document 也是 Windows 对象的属性之一.
语法: Windows.document.getElementById("header") == document.getElementById("header")
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
以下例子显示浏览器窗口的高度和宽度:(不包括工具栏 / 滚动条)
- <p id="demo">
- </p>
- <script>
- var w = Windows.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
- var h = Windows.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
- x = document.getElementById("demo");
x.innerHTML="浏览器 Windows 宽度:" + w + ", 高度:" + h + "."
</script>
其他 Windows 方法:
Windows.open(), 打开新窗口.
Windows.close(), 关闭当前窗口.
Windows.moveTo(), 移动当前窗口.
Windows.resizeTo(), 调整当前窗口的尺寸.
- :
- JavaScript Windows Screen(屏幕)
Windows.screen 对象包含有关用户屏幕的信息.
Windows.screen 对象在编写时可以不使用 Windows 这个前缀, 一些属性:
screen.availWidth, 可用的屏幕宽度.
screen.availHeight, 可用的屏幕高度.
Windows Screen 可用宽度:
screen.availWidth 属性返回访问者屏幕的宽度, 以像素计, 减去界面特性, 比如窗口任务栏.
Windows Screen 可用高度:
screen.availHeight 属性返回访问者屏幕的高度, 以像素计, 减去界面特性, 比如窗口任务栏.
(screen.width + "" + screen.height), 总宽度 / 高度.
(screen.availWidth + "" + screen.availHeight), 可用宽度 / 高度.
screen.colorDepth, 色彩深度.
screen.pixelDepth, 色彩分辨率.
- :
- JavaScript Windows Location(地址 URL)
Windows.location 对象用于获得当前页面的地址 (URL), 并把浏览器重定向到新的页面.
Windows Location(地址 URL):
Windows.location 对象在编写时可不使用 Windows 这个前缀. 一些例子:
location.hostname, 返回 web 主机的域名.
location.pathname, 返回当前页面的路径和文件名.
location.port 返回, Web 主机的端口 (80 或 443).
location.protocol, 返回所使用的 Web 协议(http:// 或 https://).
location.href, 属性返回当前页面的 URL.
Windows Location Pathname(路径名):
location.pathname, 属性返回 URL 的路径名.
Windows Location Assign(加载):
location.assign(), 方法加载新的文档.
- :
- JavaScript Windows History(历史)
Windows.history 对象包含浏览器的历史.
Windows.history 对象在编写时可不使用 Windows 这个前缀.
为了保护用户隐私, 对 JavaScript 访问该对象的方法做出了限制.
history.back(), 与在浏览器点击 "后退" 按钮相同.
history.forward(), 与在浏览器中点击 "向前" 按钮相同.
(历史回溯)history.back() 方法加载历史列表中的前一个 URL, 这与在浏览器中点击后退按钮是相同的.
(历史前进)history forward() 方法加载历史列表中的下一个 URL, 这与在浏览器中点击前进按钮是相同的.
- :
- JavaScript Windows Navigator(导航)
Windows.navigator 对象包含有关访问者浏览器的信息.
Windows.navigator 对象在编写时可不使用 Windows 这个前缀.
navigator.appCodeName, 浏览器代号.
navigator.appName, 浏览器名称.
navigator.appVersion, 浏览器版本.
navigator.cookieEnabled, 启用 Cookies(信息记录程序).
navigator.platform, 硬件平台.
navigator.userAgent, 用户代理.
navigator.systemLanguage, 用户代理语言.
注意: 来自 navigator 对象的信息具有误导性, 不应该被用于检测浏览器版本, 这是因为:
navigator 数据可被浏览器使用者更改, 一些浏览器对测试站点会识别错误, 浏览器无法报告晚于浏览器发布的新操作系统.
浏览器检测:
由于 navigator 可误导浏览器检测, 使用对象检测可用来嗅探不同的浏览器.
由于不同的浏览器支持不同的对象, 您可以使用对象来检测浏览器. 例如, 由于只有 Opera 支持属性 "Windows.opera", 您可以据此识别出 Opera.
:
JavaScript 弹窗
可以在 JavaScript 中创建三种消息框:"警告框","确认框","提示框".
警告框: 警告框经常用于确保用户可以得到某些信息, 当警告框出现后, 用户需要点击确定按钮才能继续进行操作.
语法: Windows.alert("sometext"),Windows.alert() 方法可以不带上 Windows 对象, 直接使用 alert()方法.
确认框: 确认框通常用于验证是否接受用户操作.
当确认卡弹出时, 用户可以点击 "确认" 或者 "取消" 来确定用户操作.
当你点击 "确认", 确认框返回 true, 点击 "取消", 确认框返回 false.
语法: Windows.confirm("sometext"),Windows.confirm() 方法可以不带上 Windows 对象, 直接使用 confirm()方法.
提示框: 提示框经常用于提示用户在进入页面前输入某个值.
当提示框出现后, 用户需要输入某个值, 然后点击确认或取消按钮才能继续操纵.
如果用户点击确认, 那么返回值为输入的值. 如果用户点击取消, 那么返回值为 null.
语法: Windows.prompt("sometext","defaultvalue(内定值)"),Windows.prompt() 方法可以不带上 Windows 对象, 直接使用 prompt()方法.
换行: 弹窗使用 反斜杠 + "n"(\n) 来设置换行.
:
JavaScript 计时事件
JavaScript 一个设定的时间间隔之后来执行代码, 我们称之为 "计时事件".
JavaScript 计时事件:
通过使用 JavaScript, 我们有能力做到在一个设定的时间间隔之后来执行代码, 而不是在函数被调用后立即执行. 我们称之为计时事件.
在 JavaScritp 中使用计时事件是很容易的, 两个关键方法是:
setInterval(), 间隔指定的毫秒数不停地执行指定的代码, 间隔毫秒一直循环下去.
setTimeout(), 在指定的毫秒数后执行指定代码.
注意: setInterval() 和 setTimeout() 是 HTML DOM Windows 对象的两个方法.
setInterval()方法
语法: Windows.setInterval("JavaScript function",(毫秒)milliseconds);
Windows.setInterval() 方法可以不使用 Windows 前缀, 直接使用函数 setInterval().setInterval() 第一个参数是函数(function), 第二个参数间隔的毫秒数.
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码.
语法: Windows.clearInterval(intervalVariable).
Windows.clearInterval() 方法可以不使用 Windows 前缀, 直接使用函数 clearInterval().
要使用 clearInterval("你要停止的东西") 方法, 在创建计时方法时你必须使用全局变量.
setTimeout() 方法
语法: myVar= Windows.setTimeout("JavaScript function", (毫秒)milliseconds);
setTimeout() 方法会返回某个值.
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串. 这个语句可能诸如 "alert('5 seconds!')", 或者对函数的调用, 诸如 alertMsg.
第二个参数指示从当前起多少毫秒后执行第一个参数.
clearTimeout() 方法用于停止执行 setTimeout()方法的函数代码.
语法: Windows.clearTimeout(timeoutVariable).
Windows.clearTimeout() 方法可以不使用 Windows 前缀.
要使用 clearTimeout() 方法, 你必须在创建超时方法中 (setTimeout) 使用全局变量.
如果函数还未被执行, 你可以使用 clearTimeout() 方法来停止执行函数代码.
注意: 1000 毫秒是一秒.
下列例子是在页面上显示一个时钟:
- <p id="demo">
- </p>
- <script>
- var myVar = setInterval(function() {
- myTimer()
- },
- 1000);
- function myTimer() {
- var d = new Date();
- var t = d.toLocaleTimeString();
- document.getElementById("demo").innerHTML = t;
- }
- </script>
- : JavaScript Cookie(信息记录程序)
Cookie 用于存储 Web 页面的用户信息.
Cookie 是一些数据, 存储于你电脑上的文本文件中.
当 Web 服务器向浏览器发送 Web 页面时, 在连接关闭后, 服务端不会记录用户的信息.
Cookie 的作用就是用于解决 "如何记录客户端的用户信息":
当用户访问 Web 页面时, 他的名字可以记录在 cookie 中.
在用户下一次访问该页面时, 可以在 cookie 中读取用户访问记录.
Cookie 以名 / 值对形式存储, 如右所示: username=John Doe
当浏览器从服务器上请求 Web 页面时, 属于该页面的 cookie 会被添加到该请求中. 服务端通过这种方式来获取用户的信息.
使用 JavaScript 创建 Cookie,JavaScript 可以使用 document.cookie 属性来创建 , 读取, 及删除 cookie.
JavaScript 中, 创建 cookie 如右所示: document.cookie="username=John Doe";
您还可以为 cookie 添加一个过期时间(以 UTC 或 GMT 时间). 默认情况下, cookie 在浏览器关闭时删除.
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
您可以使用 path 参数告诉浏览器 cookie 的路径. 默认情况下, cookie 属于当前页面.
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
使用 JavaScript 读取 Cookie:
在 JavaScript 中, 可以使用如右所示代码来读取 cookie:var x = document.cookie;
document.cookie 将以字符串的方式返回所有的 cookie, 类型格式: cookie1=value; cookie2=value; cookie3=value;
使用 JavaScript 修改 Cookie:
在 JavaScript 中, 修改 cookie 类似于创建 cookie, 如下所示:
document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/", 旧的 cookie 将被覆盖.
使用 JavaScript 删除 Cookie:
删除 cookie 非常简单. 您只需要设置 expires 参数为以前的时间即可, 如下所示, 设置为 Thu, 01 Jan 1970 00:00:00 GMT:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
注意, 当您删除时不必指定 cookie 的值.
Cookie 字符串:
document.cookie 属性看起来像一个普通的文本字符串, 其实它不是.
即使您在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时, cookie 信息是以名 / 值对的形式展示的.
如果您设置了新的 cookie, 旧的 cookie 不会被覆盖. 新 cookie 将添加到 document.cookie 中, 所以如果您重新读取 document.cookie.
如果您需要查找一个指定 cookie 值, 您必须创建一个 JavaScript 函数在 cookie 字符串中查找 cookie 值.
来源: http://www.bubuko.com/infodetail-2802875.html