JS高级程序设计--读书笔记(BOM对象)

    xiaoxiao2025-03-24  17

    1,window对象 BOM的核心对象是window,它表示浏览器的一个实例。在浏览器中,window对象有双重角色,‘它既是通过Javacript访问浏览器的一个接口,又是ECMAScript规定的Global对象。 <1>全局作用域 所有在全局作用域中声明的变量函数都会变成window对象的属性与方法。如下: function say(){ alert("hello"); } window.say();//hello 全局变量与window属性区别:全局变量不能通过delete操作符删除,而window属性可以。例如: var age=20; window.color="red"; delete window.age;//return false; delete window.color;//return true; <2>窗口与框架关系: 如果页面中包含框架,则每个框架都有自己的window属性,并且包含在frames集合中。在frames集合中可以通过数值索引(从0开始)来访问相应的window对象。 <3>窗口位置: --ie,safari,opera和chrome都有screenLeft和screentop属性。firefox则是screenX和screenY。跨浏览器取得窗口左边与上边位置: var leftPos=(typeof window.screenLeft=="number")? window.screenLeft:window.screenX; var topPos=(typeof window.screenTop=="number")? window.screenTop:window.screenY; <4>窗口大小 --innerWidth,innerHeight,outerWidth,outerHeight outerWidth和outerHeight返回的是浏览器窗口本身的尺寸,innerWidth和innerHeight返回的是页面视图的大小(减去边框值);在ie,firefox,safari和chrome中,document.documentElement.clientWidth和document.documentElement.clientHeight保存了页面视图的信息。 在ie6中,这些属性必须在标准模式下才有效;如果是混杂模式,就必须通过document.body.clientWith和document.body.clientHeight取得相同信息。跨浏览器取得窗口大小: var pageWidth=window.innerWidth, pageHeight=window.innerHeight; if(typeof pageWidth!="number"){ if(document.compatMode=="CSS1Compat"){ pageWidth=document.documentElement.clientWidth; pageHeight=document.documentElement.clientHeight; }else{ pageWidth=document.body.clientWidth; pageHeight=document.body.clientHeight; } } 2,location对象 location对象是最有用的BOM对象之一,它既是window对象的属性,也是document对象的属性。window.location与document.location引用的是同一个对象。 location对象的用处不止表现在它保存当前的文档,还表现在它将url解析为独立的片段。下表为location对象所有属性: hash 返回url中的hash,如果url中不包含散列,则返回空字符串 host 返回服务器名称与端口号 hostname 返回不带端口号的服务器名称 href 返回当前加载页面的完整url pathname 返回url的目录和文件名 port 返回端口号 protocol 返回页面使用协议。通常是http:或https: 位置操作: 使用location对象可以通过很多方式改变浏览器的位置。最常用的方式,如下: location.assign("url"); 这样,可立即打开新url的路径。 直接修改location的属性也可以更改url。
    转载请注明原文地址: https://ju.6miu.com/read-1297338.html
    最新回复(0)