1、1Javascript 参考手册JavaScript Window - 浏览器对象模型浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器 “对话” 。浏览器对象模型 (BOM)浏览器对象模型(Browser Object Model)尚无正式标准。由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性。Window 对象所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是
2、window 对象的方法。甚至 HTML DOM 的 document 也是 window 对象的属性之一:window.document.getElementById(“header“);与此相同:document.getElementById(“header“);Window 尺寸有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条) 。对于 Internet Explorer、Chrome、Firefox 、Opera 以及 Safari: window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度对于
3、Internet Explorer 8、7、6、5: document.documentElement.clientHeight2 document.documentElement.clientWidth或者 document.body.clientHeight document.body.clientWidth实用的 JavaScript 方案(涵盖所有浏览器):实例var w=window.innerWidth| document.documentElement.clientWidth| document.body.clientWidth;var h=window.innerHeight|
4、 document.documentElement.clientHeight| document.body.clientHeight;该例显示浏览器窗口的高度和宽度:(不包括工具栏/滚动条)其他 Window 方法一些其他方法: window.open() - 打开新窗口 window.close() - 关闭当前窗口 window.moveTo() - 移动当前窗口 window.resizeTo() - 调整当前窗口的尺寸JavaScript Window Screenwindow.screen 对象包含有关用户屏幕的信息。Window Screenwindow.screen 对象在编写时
5、可以不使用 window 这个前缀。一些属性: screen.availWidth - 可用的屏幕宽度 screen.availHeight - 可用的屏幕高度Window Screen 可用宽度3screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。实例返回您的屏幕的可用宽度:document.write(“可用宽度:“ + screen.availWidth);以上代码输出为:可用宽度:1440Window Screen 可用高度screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。实例返回您
6、的屏幕的可用高度:document.write(“可用高度:“ + screen.availHeight);以上代码输出为:可用高度:8604JavaScript Window Locationwindow.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。Window Locationwindow.location 对象在编写时可不使用 window 这个前缀。一些例子: location.hostname 返回 web 主机的域名 location.pathname 返回当前页面的路径和文件名 location.port 返回 web 主机的端口 (80
7、 或 443) location.protocol 返回所使用的 web 协议(http:/ 或 https:/)Window Location Hreflocation.href 属性返回当前页面的 URL。实例返回(当前页面的)整个 URL:document.write(location.href);以上代码输出为:http:/ Location Pathnamelocation.pathname 属性返回 URL 的路径名。实例返回当前 URL 的路径名:5document.write(location.pathname);以上代码输出为:/js/js_window_location.a
8、spWindow Location Assignlocation.assign() 方法加载新的文档。实例加载一个新的文档:function newDoc()window.location.assign(“http:/“)6JavaScript Window Historywindow.history 对象包含浏览器的历史。Window Historywindow.history 对象在编写时可不使用 window 这个前缀。为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制。一些方法: history.back() - 与在浏览器点击后退按钮相同 history.forw
9、ard() - 与在浏览器中点击按钮向前相同Window History Backhistory.back() 方法加载历史列表中的前一个 URL。这与在浏览器中点击后退按钮是相同的:实例在页面上创建后退按钮:function goBack()window.history.back()7以上代码输出为:Window History Forwardhistory forward() 方法加载历史列表中的下一个 URL。这与在浏览器中点击前进按钮是相同的:实例在页面上创建一个向前的按钮:function goForward()window.history.forward()8以上代码输出为:Jav
10、aScript Window Navigatorwindow.navigator 对象包含有关访问者浏览器的信息。Window Navigatorwindow.navigator 对象在编写时可不使用 window 这个前缀。实例txt = “Browser CodeName: “ + navigator.appCodeName + “;txt+= “Browser Name: “ + navigator.appName + “;txt+= “Browser Version: “ + navigator.appVersion + “;txt+= “Cookies Enabled: “ + na
11、vigator.cookieEnabled + “;txt+= “Platform: “ + navigator.platform + “;txt+= “User-agent header: “ + navigator.userAgent + “;txt+= “User-agent language: “ + navigator.systemLanguage + “;document.getElementById(“example“).innerHTML=txt;9警告:来自 navigator 对象的信息具有误导性,不应该被用于检测浏览器版本,这是因为: navigator 数据可被浏览器使
12、用者更改 浏览器无法报告晚于浏览器发布的新操作系统浏览器检测由于 navigator 可误导浏览器检测,使用对象检测可用来嗅探不同的浏览器。由于不同的浏览器支持不同的对象,您可以使用对象来检测浏览器。例如,由于只有 Opera 支持属性 “window.opera“,您可以据此识别出 Opera。例子:if (window.opera) .some action.JavaScript 消息框可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。实例警告框带有折行的警告框确认框提示框警告框警告框经常用于确保用户可以得到某些信息。当警告框出现后,用户需要点击确定按钮才能继续进行操
13、作。语法:alert(“文本“)确认框确认框用于使用户可以验证或者接受某些信息。当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。语法:10confirm(“文本“)提示框提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。语法:prompt(“文本“,“默认值“)JavaScript 计时通过使用 JavaScript,我们有能力做到在一个设定的时间
14、间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。实例简单的计时单击本例中的按钮后,会在 5 秒后弹出一个警告框。另一个简单的计时本例中的程序会执行 2 秒、4 秒和 6 秒的计时。在一个无穷循环中的计时事件在本例中,单击开始计时按钮后,程序开始从 0 以秒计时。带有停止按钮的无穷循环中的计时事件在本例中,点击计数按钮后根据用户输入的数值开始倒计时,点击停止按钮停止计时。使用计时事件制作的钟表一个 JavaScript 小时钟JavaScript 计时事件通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。在 JavaScritp 中使用计时事件是很容易的,两个关键方法是: