当前位置: 首页 > Web前端 > JavaScript

理解JavaScript中的window对象

时间:2023-03-27 13:37:10 JavaScript

前言每个JavaScript环境都有一个全局对象(globalobject)。在全局范围内创建的任何变量实际上都是这个对象的属性,任何函数都是它的方法。在浏览器的上下文中,全局对象是window对象,它表示包含网页的浏览器窗口。在本文中,我们将介绍Window对象的一些重要用途:浏览器对象模型(BrowserObjectModel)获取浏览器信息获取并使用浏览器历史对象来创建和控制浏览器窗口获取屏幕大小和显示细节浏览器对象模型TheBrowserObject模型(简称BOM)是包含有关浏览器和计算机屏幕的信息的属性和方法的集合。例如,我们可以找出正在使用哪个浏览器查看页面,尽管这种方法并不可靠。我们还可以找出查看它的屏幕尺寸,以及在当前页面之前访问过哪些页面。如果您想惹恼用户,它也可以用于创建弹出窗口的相当可疑的做法。BOM并没有官方的标准,虽然很多的属性和方法都被各大浏览器所支持,但它已经成为了事实上的标准。这些属性和方法由window对象提供,每个浏览器窗口、标签页、弹出窗口、frame、iframe都有一个window对象。浏览器环境请记住,JavaScript可以在不同的环境中运行。BOM仅在浏览器上下文中有意义。这意味着其他环境可能没有窗口对象,尽管它们仍然有一个全局对象。例如,Node.js有一个名为global的对象。如果不知道全局对象的名称,可以在全局范围内使用关键字this来引用全局对象。以下代码提供了将变量global分配给全局对象的快捷方式:constglobal=this;深入了解全局变量全局变量是在不使用const、let或var关键字的情况下创建的变量。可以在整个程序中访问全局变量。全局变量是全局对象的属性。在浏览器环境中,全局对象是窗口对象。这意味着任何创建的全局变量都是窗口对象的属性,从下面的例子可以看出:x=6;//创建了全局变量>>6window.x//同一个变量可以作为访问的window对象的属性>>6//window.x===x>>true正常情况下引用全局变量应该不用使用窗口对象。这减少了输入并使您的代码在不同环境中更具可移植性。一个例外是如果您需要检查是否已定义全局变量。例如,如果x没有被定义,下面的代码会抛出一个ReferenceError:.x会直接返回false,也就是说代码块不会执行:if(window.x){//dosomething}parseInt()和isNaN()等一些函数是全局对象的方法。在浏览器环境中,这些是窗口对象的方法。与变量一样,通常会忽略直接通过窗口对象访问它们。对话框在浏览器中,有三个函数用于生成对话框:alert()、confirm()和prompt()。这些都不是ECMAScript标准的一部分,尽管所有主流浏览器都支持它们作为窗口对象的方法。AlertDialogwindow.alert()暂停程序执行并在对话框中显示消息。该消息作为方法的参数提供,该方法始终返回未定义的:window.alert('Hello');>>undefinedConfirm对话框window.confirm()方法停止程序执行并显示一个确认对话框。显示作为参数提供的信息并提供确认或取消选项。如果用户点击确定,返回一个布尔值true,如果用户点击取消,返回一个布尔值false:window.confirm('Doyouwishtocontinue?');>>undefinedPromptdialogwindow.prompt()方法将停止程序的执行,并显示一个对话框。显示作为参数提供的信息,以及允许用户输入文本的输入字段。当用户单击“确定”时,文本将作为字符串返回。如果用户点击取消,将返回null:window.prompt('请输入您的姓名:');谨慎使用本机对话框。再次值得强调的是,这些方法会在程序执行过程中停止程序。这意味着在调用该方法的那一刻,一切都停止处理,直到用户单击“确定”或“取消”。如果程序需要同时处理其他事情,或者程序正在等待回调函数,这可能会导致问题。在某些情况下,可以使用此功能,因为它具有一些优点。例如,window.confirm()对话框可用作最终确认以检查用户是否要删除资源。这将阻止程序继续执行并阻止删除资源,直到用户决定如何处理它。还值得注意的是,大多数浏览器允许用户禁用任何重复出现的对话框,这意味着该功能不可靠。浏览器信息window对象具有一系列属性和方法,可提供有关用户浏览器的信息。Navigator对象window对象有一个名为navigator的属性,它返回对Navigator对象的引用。Navigator对象包含有关正在使用的浏览器的信息。上面的userAgent属性将返回有关正在使用的浏览器和操作系统的信息。例如,如果我运行以下代码,它会显示我在MacOS上使用Safari10:window.navigator.userAgent>>"Mozilla/5.0(Macintosh;IntelMacOSX10_12_3)AppleWebKit/602.4.8(KHTML,如Gecko)Version/10.0.3Safari/602.4.8"但是,不要依赖此信息,因为用户可以修改它以伪装成另一个浏览器。也很难理解返回的字符串,因为所有浏览器都在某种程度上伪装成其他浏览器。例如,出于旧版Netscape兼容性原因,每个浏览器都会在其自己的userAgent属性中包含Mozilla字符串。userAgent已从官方标准中弃用,但在所有主要浏览器中仍然得到很好的支持。URLwindow.location是一个包含有关当前页面URL信息的对象。它包含提供有关URL不同部分的信息的属性。href属性以字符串形式返回完整的URL:window.location.href>>""此属性(以及本节中的大多数其他属性)是一个读/写属性,这意味着它可以通过赋值来改变。如果分配完成,当前页面将重新加载新的属性值。例如,在浏览器控制台输入如下代码,浏览器会重定向到指定页面:window.location.href=''>>"”协议属性返回描述所用协议的字符串(如http、https、pop2、ftp等)。注意字符串末尾的冒号:window.location.protocol>>"https:"host属性返回一个描述当前URL的域名和端口号的字符串。如果使用默认端口号80,通常省略端口号:window.location.host>>"www.sitepoint.com"hostname属性返回描述当前URL域名的字符串:window.location.hostname>>"www.sitepoint.com"port属性返回描述端口号的字符串,如果没有在URL中显式声明端口,则返回空字符串:window.location.port>>""pathname属性返回域名路径字符串:window.location.pathname>>"/javascript-window-object/"搜索属性返回以“?”开头的字符串后跟查询字符串参数。如果没有查询字符串参数,将返回一个空字符串:window.location.search>>""hash属性返回一个以“#”开头后跟片段标识符的字符串。如果没有片段标识符,将返回一个空字符串:window.location.hash>>""origin属性返回一个字符串,显示当前页面来源的协议和域名。此属性是只读的,因此无法更改:window.location.origin>>""window.location还有如下方法:reload()方法可用于强制重新加载当前页面。如果传递参数true,它会强制浏览器从服务器重新加载页面,而不是使用缓存的页面。assign()方法可用于从参数提供的URL加载另一个资源。例如:window.location.assign('')replace()方法和assign()方法几乎一样,只是当前页面不会存储到浏览器历史。所以用户不能使用后退按钮返回。toString()方法返回一个包含整个URL的字符串:window.location.toString();>>""浏览器历史记录window.history属性可用于访问有关浏览器会话中任何先前访问过的页面的当前信息。避免将它与新的HTML5HistoryAPI混淆。window.history.length属性显示在到达当前页面之前已经访问了多少页面。window.history.go()方法可以用来跳转到指定页面,0表示跳转到当前页面:window.history.go(1);//转发一个页面window.history.go(0);//重新加载当前页面window.history.go(-1);//后退一个页面也有window.history.forward()和window.history.back()方法,可以分别用来前进或后退一个页面,就像浏览器的前进和后退按钮一样。控制窗口可以使用window.open()方法打开一个新窗口。该方法接收要打开的页面的URL作为第一个参数,窗口的标题作为第二个参数,属性列表作为第三个参数。这也可以分配给一个变量,以便稍后在代码中引用该窗口:constpopup=window.open('','SitePoint','width=700,height=700,可调整大小=是');close()方法可用于关闭窗口,假设您有一个窗口引用:popup.close();您还可以使用window.moveTo()方法移动窗口。该方法接收两个参数,分别是窗口要移动到的屏幕的X轴和Y轴坐标:window.moveTo(0,0);//要将窗口移动到屏幕的左上角,可以使用window.resizeTo()方法调整窗口大小。该方法接收两个指定调整后窗口的宽度和高度的参数:window.resizeTo(600,400);烦人的弹出窗口这些方法在很大程度上是给JavaScript一个坏名声的原因,因为它们用于创建烦人的弹出窗口,其中通常包含侵入性广告。从可用性的角度来看,调整或移动用户窗口也是一个坏主意。许多浏览器会阻止弹出窗口,并且在某些情况下不允许调用其中的某些方法。例如,如果打开了多个选项卡,则无法调整窗口大小。您也不能移动或调整不是使用window.open()创建的窗口的大小。谨慎使用这些方法是明智的,因此在使用它们之前请仔细考虑。几乎总会有更好的选择,优秀的程序员会努力寻找它。屏幕信息window.screen对象包含有关浏览器显示的屏幕的信息。您可以分别使用height和width属性找出屏幕的高度和宽度(以像素为单位):window.screen.height>>1024window.screen.width>>1280availHeight和availWidth可用于查找屏幕的高度和宽度屏幕,不包括任何操作系统的菜单:window.screen.availWidth>>1280window.screen.availHeight>>995colorDepth属性可用于查找用户显示器的颜色位深度,尽管很少有用于除了收集用户统计信息外,还这样做:window.screen.colorDepth;>>24更适合移动平台屏幕对象对移动设备有更多的用途。它还允许您执行诸如关闭设备屏幕、检测其方向变化或将其锁定在特定方向等操作。谨慎使用上一节中介绍的许多方法和属性过去曾被滥用于可疑活动,例如用户代理嗅探或检测屏幕尺寸以决定是否显示某些元素。这些做法现在已被更好的做法所取代,例如媒体查询和特征检测。文档对象每个窗口对象都包含一个文档对象。该对象具有一系列属性和方法,用于处理已加载到窗口中的页面。文档对象包含一些有趣的方法。document.write()write()方法只是将一串文本写入页面。如果页面已经加载,它将完全替换当前文档:document.write('Hello,world!');这将用字符串Hello,world!替换整个文档。可以将HTML包含在一个字符串中,该字符串将成为DOM树的一部分。例如,下面的代码将创建一个

标签节点和一个文本子节点:document.write('

Hello,world!

');document.write()方法也可以在documentdocument.write("Hello,world!")document.write()的使用非常不受欢迎,因为它只能通过在HTML文档中混合JavaScript来使用。仍然有一些极其罕见的合法用途,但优秀的程序员很少需要使用它。综上所述,以上就是关于window对象的全部主要内容,感谢阅读。如果你学到了知识,欢迎点赞收藏转发~