BOM

一,window对象
1,全局作用域
  window对象扮演着js中任何对象,变量,函数的Global对象
  全局变量(var age = 10;)不能通过delete操作符删除,
  而直接用window对象上定义的变量(window.age = 10;)可以通过delete删除
  未声明的变量被使用时错误的,但未声明的window对象的变量可以被使用 var newValue = window.oldValue;
2,窗口关系及框架
  1)页面中包含的框架,每个框架都有属于自己的window对象,保存在frames集合中,可以通过frames索引获取每个框架,
    每个window对象都有一个name属性,其中包含框架的名字

<frameset rows="160,*">
   <frame src="" name="topFrame">
   <frameset cols="50%,50%">
      <frame src="" name="leftFrame">
      <frame src="" name="rightFrame">
   </frameset>
</frameset>

   可以通过 widow.frames[0],window.frames['topFrame'],top.frames[0],top.frames['topFrame'],frames[0],frames['topFrame']访问第一个框架
    window.frames[1],window.frames['leftFrame'],top.frames[1],top.frames['leftFrame'],frames[1],farmes['leftFrame']访问第二个左边的框架
    top对象始终指向最高最外层的框架
    parent对象始终指向当前框架的直接上层框架,在没有框架的时候,top与parent相同都等有window对象
  3)除非最高层窗口是通过window.open()打开的,否则window对象的name属性不会包含任何值
  4)self对象 与window是一样的 只是为了与top,parent对应起来
3,窗口位置
  screenLeft 和 screenTop属性 用于表示窗口相对于屏幕左边和上边的位置 IE Safari Opera Chrome支持
  screenX 和 screenY 属性 与上面用法相同,Firefox支持 Safari Chrome 也支持 opera支持的效果不同
  实现兼容性
  var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft:window.screenX;
  var topPos = (typeof window.screentTop == "number") ? window.screenTop:window.screenY;
  moveTo(x,y) 移动到xy位置
  moveBy(x,y) 正为右和下,负为左和上
4,窗口大小
  innerWidth innerHeight 返回视图的大小
  outerWidth outerHeight 返回浏览器窗口本身的尺寸(Safari,IE,Firefox)返回页面视图容器大小(opera Chrome)
  一般浏览器中(除IE6以下)
  document.documentElement.clientWidth和document.documentElement.clientHeight 返回视图的大小(除IE6)
  IE6中必须在标准模式中使用以上两个属性,混杂模式中使用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.clientHeight;
    }else{
      pageWidth = document.body.clientWidth;
      pageHeight = document.body.clientHeight;
    }
  }

  document.compatMode 判断页面是否处于标准模式
  resizeTo() 参数为新度量
  resizeby() 参数为新度量和原度量之差
5,导航和打开窗口
  1)弹出窗口
  window.open(URL,窗口目标,特性字符串,新页面是否取代浏览器历史记录中当前加载页面的布尔值)
  URL为链接,窗口目标(topFrame,_self,_parent,_top,_black)
  第三个参数为指定的新窗口设置属性(height,width,left,top,fullscreen是否最大化,location是否显示地址栏,menubar是否显示菜单栏,resizable是否可   以通过拖动边框改变大小,scrollbars是否允许滚动,status是否现在状态栏,toolbar是否显示工具栏)
  window.close()关闭打开的窗口,仅适用于window.open()打开的窗口
  opener属性,保存着打开它的原始窗口对象 值设置为null表示在单独的进程中运行新标签页,与原始打开它的页面不发生通信
  2)安全限制
  3)弹出窗口屏蔽程序
  如果是浏览器内置屏蔽程序则window.open()为null
  var wroxWin = window.open("http://www.wrox.com","_black")
  if(wroxWin == null){alert("The popup was blocked!");}
  如果是扩展或其他程序阻止弹出窗口window.open()会抛出异常

  var blocked = false;
  try{
    var wroxWin = window.open("","");
    if(wroxWin == null){
      blocked = true;
    }
  }catch(ex){
    blocked = true;
  }
  if(blocked){alert("The popup was blocked!");}

6,间歇调用和超时调用
  1)js是单线程语言
  2)超时调用setTimeout(执行的javascript代码,延迟的时间毫秒),调用后返回一个ID表示超时调用,一般讲它赋值给一个变量
  后面清除clearTimeout(ID)
  3)间歇调用setInterval(执行的javascript代码,间隔时间毫秒),不建议javascript代码以字符串形式,建议传人函数
  调用后同样返回一个ID 可以通过这个返回值赋给一个变量 后面清除clearInterval(ID)
  多用于超时调用替换间歇调用,间歇调用的执行顺序不好控制
7,系统对话框
  1)alert(),confirm(),prompt()同步和模态的,就是说在弹出对话框的时候代码会停止执行,关掉对话框后会恢复执行
  2)alert() 警告框,参数为要弹出的字符串
  3)confirm() 确认框,返回布尔值
  if(confirm("are you sure?")){alert("dgas");}
  else{alert("asdgasdgdsag");}
  4)prompt() 提示框,接收两个参数,显示给用户的文本提示语和文本输入框的默认值
  5)coogle Chrome 浏览器还引入一种新特性,如果当前脚本在执行过程中打开多个对话框,那么从第二个对话框开始出现一个复选框,以便阻止后续的对话         框提示,除非刷新页面
  6)find() print() 查找和打印 对话框计数器不会将它们计算在内
二,location对象
  即是window的属性,也是document的属性,window.location=document.location
  hash 返回URl的hash(#后跟0或字符)如果URl不包含散列返回空字符串 例"#contents"
  host 返回服务器名和端口号 "www.wrox.com:8080"
  hostname 返回服务器名 "www.wrox.com"
  href 返回完整的URL路径 "http://www.wrox.com" 等于location的toString()
  pathname 返回URL中的目录或文件名 "/WilerCDA/"
  port 返回端口号 "8080"
  protocol 返回页面使用的协议 "http:"
  search 返回URl查询字符串以问号开头 "?q= javascript"
1,查询字符串参数

  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;
  for(var i = 0 ;i < items.length;i++){
    item = items[i].split("=");
    name = decodeURIComponent(item[0]);
    value = decodeURIComponent(item[1]);
    if(name.length){
      args[name] = value;
    }
  }
    return args;
  }

2,位置操作
  location.assign("http://www.worx.com");
  window.location("http://www.worx.com");
  locatin.href("http://www.worx.com");
  例 初始URL为                      http://www.worx.com/WileyCDA/
      location.hash = "#section1"        http://www.worx.com/WileyCDA/#section1
      location.search="?q=javascript"      http://www.worx.com/WileyCDA/?q=javascript
      location.hostname = "www.yahoo.com"   http://www.yahoo.com/WileyCDA/
      location.pathname = "mydir"          http://www.yahoo.com/mydir/
      location.port = 8080;              http://www.yahoo.com:8080/WileyCDA/
  除了修改hash每次都会刷新页面,以新的页面展示
  location.replace() 方法参数接收到导航到的页面,到达之后后退不能回到原来页面
  location.reload() 从缓存中重新加载页面
  location.reload(true) 从服务器重新加载页面
三,navigator对象
  识别客户端浏览器的对象
1,检测插件
  1)plugins数组,检测浏览器是否安装了特定的插件,数组每一项都包含下列属性
  name:插件名称,description:插件描述,filename:插件文件名,length:插件处理的MIME类型数量
  检测插件的函数(IE除外)

  function hasPlugin(name){
    name = name.toLowerCase();
    for(var i = 0;i < navigator.plugins.length;i++){
      if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){return true;}
    }
    return false;
  }    

  检测flash alert(hasPlugin("Flash"));
  IE中检测插件的函数

  function hasIEPlugin(name){
  try{
    new ActiveXObject(name);
    return true;
    }catch(ex){
      return false;
    }
  }

  检测Flash alert(hasIEPlugin("ShockwaveFlash.shockwaveFlash"));
  一般典型的做法是针对每个插件分别创建检测函数

  function hasFlash(){
    var result = hasPlugin("Flash");
    if(!result){
      result = hasIEPlugin("ShockwaveFlash.shockwaveFlash");
    }
    return result;
  }

  2)每个插件对象本身也是一个MimeType对象的数组,
    MIME类型的描述description,回指插件对象的enabledPlugin,表示与MIME类型对应的文件扩展名的字符串suffixes(以逗号分隔),完整MIME类型字      符串的type
  3)plugins集合有一个叫refresh()的方法,用于刷新plugins以反映最新安装的插件
2,注册处理程序
  1)让一个站点指明它可以处理特定类型的信息
  2)registerContentHander() 接收是三个参数,要处理的MIME类型,可以处理该MIME类型的页面的URL以及应用程序的名称
  3)registerProtocolHander() 接收三个参数,要处理的协议,处理该协议的页面的URL和应用程序的名称,
四,screen对象
  availHeight:屏幕的像素高度-系统部件高度之后的值
  availWidth:屏幕的像素宽度-系统部件宽度之后的值
  availLeft:未被系统部件占用的最左侧的像素值
  availTop:未被系统部件占用的最上方的像素值
  height:屏幕的像素高度
  屏幕的像素宽度
  left:当前屏幕距左边的像素距离
  top:当前屏蔽距上边的像素距离
五,history对象
  保存着用户上网的历史记录,从窗口被打开的那一刻起,
  go() 负数表示页面向后跳转,正数表示页面向前跳转,也可接受一个字符串参数跳到包含该字符串的第一个位置
  back() 后退函数
  forward() 前进函数
  length属性,保存着历史记录的数量

原文地址:https://www.cnblogs.com/b0xiaoli/p/3626778.html