BOM总结

目录:

1.window对象-BOM的核心

2.location对象

3.navigator对象

4.screen对象

5.history对象

一、window对象

1.1 全局作用域 

在网页中定义的任何一个对象、变量和函数,都以window作为其Global对象,因此有权访问parseInt()等方法。所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。不过定义全局变量与在window对象上直接定义属性还是有一点差别:全局变量不能通过delete操作符删除,而直接在window对象上的定义的属性可以。

1.2 窗口关系及框架

top对象始终指向最高(最外)层的框架,也就是浏览器窗口。

对于一个在框架中编写的任何代码来说,其中window对象指向的都是那个框架的特定实例,而非最高层的框架。

与top相对的另一个window对象是parent。parent对象始终指向当前框架的直接上层框架。在某些情况下,parent有可能等于top;但在没有框架的情况下,parent一定等于top(此时都等于window)。

所有这些对象都是window对象的属性,可以通过window.parent、window.top等形式来访问。

1.3 窗口大小

在IE9+和其他浏览器中outerWidth,outerHeight 表示浏览器窗口本身的大小,但在chrome,Opera中表示视口大小;innerWidth,innerHeight都表示视口大小。因此不能很好地跨浏览器确定浏览器大小,但可以确定视口大小。

在IE6中,标准模式下使用document.documentElement.clientWidth, document.documentElement.clientHeight

混杂模式下,就必须通过document.body.clientWidth, document.body.clientHeight

因此,跨浏览器确定视口大小的方法

  var pageWidth=window.innerWidth;
   var pageHeight=window.innerHeight;
  if(typeof pageWidth!='number'){
    if(document.compatMode=='CSS1Compat'){
      pageWidth=document.documentElement.clientWidth;
      pageHeight=document.documentElement.cliendHeight;
    }else{
      pageWidth=document.body.clientWidth;
      pageHeight=document.body.cliendHeight;
    }
  }

移动设备的视口问题比较复杂。

1.4 导航和打开窗口

使用window.open()方法可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。接受4个参数:要加载的URL、窗口目标、一个特性字符串、一个表示页面是否取代浏览器历史记录中当前加载页面的布尔值。

通常只需要传递第一个参数,最后一个参数只在不打开新窗口的情况下使用。不打开新窗口的情况下,会忽略第三个参数。

如果传递了第二个参数,而且该参数是已有窗口或框架的名称,那么就会在具有该名称的框架或窗口中打开第一个参数指定的URL。第二个参数也可以是一个特殊的窗口名称:_self、_parent、_top、_blank。

如果第二个参数不是一个已经存在的窗口或框架,那么该方法就会根据第三个参数上传入的字符串创建一个新窗口或新标签页。如果没有传入第三个参数,那么就会打开一个带有全部默认设置(工具栏、地址栏和状态栏等)的新浏览器窗口。第三个参数是一个逗号分隔的设置字符串,表示在新窗口中都显示哪些特性。

window.open()会返回一个指向新窗口的引用。

大多数浏览器都内置有弹出窗口屏蔽程序,在弹出窗口被屏蔽时,应该考虑两种可能性。如果是浏览器内置的屏蔽程序组织的弹出窗口,那么window.open()很可能会返回null。只要检测这个返回的值就可以确定弹出窗口会否被屏蔽。如果是浏览器扩展或其他程序阻止的弹出窗口,那么window.open()通常会抛出一个错误。

var blocked=true;
try{
  var wroxwin=window.open('http://www.baidu.com','_blank');
  if(wroxwin==null){blocked=true;}
}catch(ex){
  blocked=true;
}
if(blocked){alert('The popup was blocked');}
1.5 间歇调用和超时调用

间歇调用setInterval  clearInterval  

超时调用setTimeout  clearTimeout

1.6 系统对话框

alert()、confirm()、prompt(),通过这几个方法打开的对话框都是同步和模态的。也就是说,显示这些对话框的时候代码会停止执行,而关掉这些对话框后代码又恢复执行。

confirm(需要显示的提示内容) 用户点击了OK,返回true,点击了cancel或右上角的X按钮,返回false;

prompt(显示给用户的文本提示,文本输入域的默认值)。 如果用户单击了OK按钮,prompt()返回文本输入域的值;如果用户单击了cancel或没有单击OK而是其他方式关闭对话框,则该方法返回null。

二、 location对象

location对象既是window对象的属性也是document对象的属性;所以window.location和document.location引用的是同一个对象。location对象的用户不只表现在它保存当前文档的信息,还表现在它将URL解析为独立的片段,让开发人员可以通过不同的属性访问这些片段。

location.hash  返回URL中的hash(#号后跟0或多个字符)

location.host   返回服务器名称和端口号(如果有)

location.hostname  返回服务器名称

location.href  返回当前加载页面的URL

location.pathname   返回url中的目录和或文件名

location.port

location.protocol

location.search  返回URL的查询字符串,以问号开头

function getQueryStringArgs(){
  var qs=(location.search.length>0?location.search.substring(1):'');
  var args={};
  var items=qs.length?qs.split('&'):[];
  var item=null;
  var name=null;
  var value=null;
  var len=items.length;
  for(var i=0;i<len;i++){
    item=items[i].split('=');
    name=decodeURIComponent(item[0]);
    value=decodeURIComponent(item[1]);
    if(name.length){
      args[name]=value;
    }
  }
  return args;
}
2.1位置操作

使用location可以通过很多方法来改变浏览器的位置。

1)location.assign(url)

立即打开新URL并在浏览器的历史记录中生成一条记录。如果是将location.href或window.location设置为一个URL值,也会以该值调用assign()方法。

2)location.href=url

3) window.location=url

4) 修改之前所说的那些属性;location.hash='#section1'...

每次修改location的属性(hash除外),页面都会以新URL重新加载。通过上述任何一种方式修改URL之后,浏览器的历史记录中都会生成一条新纪录,可以通过后退按钮导航到前一个页面。要禁用这种行为,可以使用replace()方法。

5) location.replace(url)这个方法会导致浏览器位置改变,但不会在历史记录中生成新记录,调用replace()方法后,用户不能回到前一个页面。

setTimeout(function(){

  location.replace(url);//在当前页面显示1秒后跳转到URL

},1000)

6)location.reload()重新加载当前页面。不传递参数时以最有效的方式重载。传入true时,强制从服务器重新加载。

reload()调用后的代码可能会也可能不会执行,因此最好将reload()放在代码最后一行。

三、navigator对象

检测插件、注册处理程序(让一个站点指明它可以处理特定类型的信息,注册处理程序就为像使用桌面应用程序一样默认使用哪些在线应用程序)

四、screen对象

所有浏览器都支持的四个属性(只读)

screen.availHeight  屏幕的像素高度减去系统部件高度之后的值

screen.availWidth   屏幕的像素宽度减去系统部件宽度之后的值

screen.height         屏幕的像素高度

screen.width          屏幕的像素宽度

这四个值不论浏览器大小是否调整,值都不会变;window.innerHeight/innerWidth是会变化的

五、history对象

go()接受一个参数,

传入表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转(后退),正数表示向前跳转(前进)

传递一个字符串参数,跳转到历史记录中包含该字符串的第一个位置

可以使用back()和forward()来代替go()

history.go(-1)    history.back()    history.forward()

history对象还有一个length属性,保存着历史记录的数量。对于加载到窗口、标签页或框架中的第一个页面而言,history.length等于0.

if(history.length==0){

  //这应该是用户打开窗口后的第一个页面

}
原文地址:https://www.cnblogs.com/YangqinCao/p/5478349.html