JavaScript高级编程—

window对象：
1. BOM的核心，表示浏览器的一个实例；
2. 在浏览器中，window对象既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象，这意味着在网页中定义的任何一个对象、变量和函数，都以window 作为其 Global 对象，故有权访问parseInt()等方法；
3. 全局作用域
  1. 在全局作用域中声明的变量、函数都会变成window对象的属性和方法；
  2. 全局变量与直接在window对象上定义的属性的区别：全局变量不能通过delete操作符删除，二直接在window对象上定义的属性可以；
  3. 访问未声明的变量时将报错，此时可以通过查询window对象属性的方式来判断属性是否存在； var newValue = oldValue; //会抛出错误，因为oldValue未定义 var newValue = windwo.oldValue; //不会抛错，因为这是一次属性查询，未定义的将会返回undefined
4. 窗口关系及框架
  1. 页面中包含框架时，每个框架都有自己的window对象，并且保存在frames集合中；
  2. frames集合中，可以通过数值索引（从0开始，从左至右，从上到下）或者框架名称来访问相应的window对象；
  3. 每个window对象都包含name属性，表示框架名称；
  4. top对象：始终指向最高（最外）层的框架，也就是浏览器窗口；对于最上层的框架，除非是通过window.open()打开的，否则其window对象的name属性不包含任何值；
  5. parent对象：始终指向当前框架的直接上层框架（在没有框架的情况下，parent一定等于top）；
  6. self对象：始终只想window，可以与window对象互换使用；
  7. 上面的所有对象都是window对象的属性，可以通过点操作符进行访问，如window.top、window.parent等；
5. 窗口位置：
  1. window.screenLeft、window.screenTop：IE、Safari、Opera和Chrome都支持该属性
  2. window.screenX、window.screenY：FireFox支持该属性，同时Safari和Chrome也同时支持；
  3. 跨浏览器获取窗口左边与上边位置：
    var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
    var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
  4. window.moveTo(x, y)：传入新位置的x，y坐标值；
  5. window.moveBy(hPixel,vPixel)：传入水平和垂直方向上移动的像素数；
  6. moveTo()、moveBy()可能会被浏览器禁用；且在Opera和IE7（或更高版本）中默认是禁用的；且这两个方法均不适用于框架，只能对最外层的window对象使用；
6. 窗口大小：
  1. 属性：innerWidth、innerHeight、outerWidth 和outerHeight
  2. IE9+、Firefox、Safari、Opera 和Chrome 均为此提供了此4 个属性；
  3. outerWidth 和outerHeight 属性：在IE9+、Safari 和Firefox中，这两个属性返回的是浏览器窗口本身的尺寸（无论是从最外层的window 对象还是从某个框架访问）；在Opera 中，则表示页面视图容器的大小;
  4. innerWidth 和innerHeight属性：表示该容器中页面视图区的大小（减去边框宽度）；
  5. 在Chrome 中，outerWidth、outerHeight 与innerWidth、innerHeight 返回相同的值，即视口（viewport）大小而非浏览器窗口大小；
  6. 获取页面可视窗口大小：
```
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;}
}
```
  7. resizeTo()和resizeBy()：调整浏览器窗口的大小；resizeTo()接收浏览器窗口的新宽度和新高度，而resizeBy()接收新窗口与原窗口的宽度和高度之差；
7. 导航和打开窗口
  1. window.open(url, target, character, isReplace)：既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口
    1. url：要加载的URL
    2. target：窗口目标，当该参数是已有窗口或框架的名称，则会在具有该名称的窗口或框架中加载第一个参数指定的URL；
    3. character：是一个逗号分隔的设置字符串，在target不是已存在的窗口或框架情况下作为新窗口或新标签页特性，否则忽略该参数；
    4. isReplace：表示新页面是否取代浏览器历史记录中当前加载页面的布尔值；
    5. 通常只须传递第一个参数，最后一个参数只在不打开新窗口的情况下使用。
  2. window.open()方法会返回一个指向新窗口的引用：
```
var newWindow = window.open("http://www.wrox.com/","wroxWindow", "height=400,width=400,top=10,left=10,resizable=yes");
```
    1. 引用的对象与其他window 对象大致相似，但我们可以对其进行更多控制；
    2. newWindow.resizeTo(500,500)：调整大小;
    3. newWindow.moveTo(100,100)：移动位置;
    4. newWindow.close()：关闭新打开的窗口，该方法仅适用于通过window.open()打开的弹出窗口;
    5. newWindow.opener：新创建的window 对象的属性，保存着打开它的原始窗口对象，这个属性只在弹出
      窗口中的最外层window 对象（top）中有定义，而且指向调用window.open()的窗口或框架；
    6. newWindow.opener = null：将opener 属性设置为null 就是告诉浏览器新创建的标签页不需要与打开它的标签页通信，因此可以在独立的进程中运行；
  3. 安全限制
  4. 弹出窗口屏蔽程序
    1. 弹出窗口被屏蔽有两种情况：一种是浏览器内置程序屏蔽；另一种是由第三方扩展程序屏蔽；
    2. 若弹出窗口是被浏览器内置程序屏蔽，则执行判断window.open()返回的值是否为null即可判断：
```
var wroxWin = window.open("http://www.wrox.com", "_blank");
if (wroxWin == null){alert("The popup was blocked!");
}
```
    3. 若是被第三方扩展程序屏蔽，window.open()将会抛出一个错误，所以需要通过try-catch将其捕获
```
var blocked = false;
try {var wroxWin = window.open("http://www.wrox.com", "_blank");if (wroxWin == null){blocked = true;}
} catch (ex){blocked = true;
}
if (blocked){alert("The popup was blocked!");
}
```
  5. 间歇调用与超时调用
    1. setTimeout(execCode, time)：
      1. execCode：可以是一个包含JavaScript代码的字符串，也可以是一个函数（推荐使用）；
      2. time：等待时间，单位时毫秒；
      3. 该方法将返回一个数值ID，表示超时调用，该ID是计划执行代码的唯一标识符，可通过它来取消超时调用（通过clearTimeout(超时调用ID)取消）；
      4. 超时调用的代码是在全局作用域中执行的，故在非严格模式下this指向window对象，严格模式下则为undefined；
    2. setInterval(execCode, time)：
      1. execCode：与setTimeout相同
      2. time：执行间隔时间；
      3. 该方法调用后同样会返回一个数值ID，表示间隔调用，该ID可用于取消间隔调用（通过clearInterval(间隔调用ID)取消）；
  6. 系统对话框
    1. alert()、confirm()、prompt()
    2. 外观由操作系统及（或）浏览器设置决定，而不是由CSS 决定；
    3. 通过这几个方法打开的对话框都是同步和模态的。也就是说，显示这些对话框的时候代码会停止执行，而关掉这些对话框后代码又会恢复执行；
    4. confirm()方法返回的是布尔值：true 表示单击了OK，false 表示单击了Cancel 或单击了右上角的X 按钮;
    5. prompt(显示的内容, 输入框默认内容)方法返回文本输入域的值：提示框中除了显示OK 和Cancel 按钮之外，还会显示一个文本输入域，以供用户在其中输入内容；
    6. window.print()：
    7. window.find()：
8. location对象
  1. 概述
    1. location 是最有用的BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能；
    2. window.location 和document.location 引用的是同一个对象；
    3. 它将URL 解析为独立的片段，让开发人员可以通过不同的属性访问这些片段；
    4. location的属性：
    5. 查询字符串参数
```
function getQueryStringArgs(){//取得查询字符串并去掉开头的问号var qs = (location.search.length > 0 ? location.search.substring(1) : ""),//保存数据的对象args = {},//取得每一项items = qs.length ? qs.split("&") : [],item = null, name = null, value = null,//在for 循环中使用i = 0,len = items.length;//逐个将每一项添加到args 对象中for (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;
}方法的调用
//假设查询字符串是?q=javascript&num=10
var args = getQueryStringArgs();
alert(args["q"]); //"javascript"
alert(args["num"]); //"10"
```
    6. 位置操作
      1. location.assign(url)：在当前页面打开新URL 并在浏览器的历史记录中生成一条记录，该方法与通过window.location、location.href来设置URL值的效果相同；
      2. location.replace(url)：在当前页面打开新URL，但不会在浏览器的历史记录中生成记录；
      3. location.reload()：
        location.reload();有可能从缓存中加载（如果页面自上次请求以来并没有改变过，页面就会从浏览器缓存中重新加载）；
        
        location.reload(true);重新加载（强制从服务器重新加载）
        
        位于reload()调用之后的代码可能会也可能不会执行，这要取决于网络延迟或系统资源等因素。所以，最好将reload()放在代码的最后一行。

JavaScript高级编程——BOM相关推荐

JavaScript 高级编程（二）
JavaScript 高级编程(二) BOM 一套操作浏览器的API. 常见对象 window: 代表整个浏览器窗口注意: window是BOM中的一个对象, 并且是一个顶级的对象(全局) Navi ...
JavaScript高级编程 III
原文地址:http://www.onlamp.com/pub/a/onlamp/2007/11/20/advanced-javascript-iii.html JavaScript高级编程I:http ...
【读书笔记】JavaScript高级编程（二）
2019独角兽企业重金招聘Python工程师标准>>> 书中第3章基本概念摘要(一) 3.3 变量使用var操作符定义的变量将成为定义该变量的作用域中的局部变量.也就是说,如果在 ...
javascript高级编程教程,javascript基础入门案例
谁有比较好的javascript视频教程李炎恢的javascript教程,在verycd上可以下载. 结合<javascript高级程序设计>学习,应该会比较好,他这个教程就是参考了&l ...
JavaScript高级（BOM+DOM）学习
文章目录 1.DOM简单学习 2.事件简单学习 3.点灯开关练习 4.BOM 4.1 BOM的概念 4.2 BOM的功能 4.3 BOM对象 4.4 Window :窗口对象 4.5 Location ...
JavaScript面向对象编程BOM对象
BOM对象一.BOM 1.什么是BOM? 二.浏览器对象模型: 1.Window(窗口对象): 2.Document(文档)对象 3.location对象 4.navigator对象 5.scree ...
javascript高级编程学习笔记（二）——继承
2019独角兽企业重金招聘Python工程师标准>>> 写读书笔记的好处在于加深记忆,前一篇总结了编程中创建的对象的几种方式,以及常用的方式,这一篇总结实现继承的方式: 1.对象冒充 ...
JavaScript高级编程设计（第三版）——第二章：在html中使用javaScript
系列文章目录第三章:基本概念目录系列文章目录前言一.javaScript是什么? 1.有两种引入方式 1.1 嵌入式 1.2 外部引入 1.3 noscript标签标签 1.4文档模式 2 ...
JavaScript高级编程设计（第三版）——第四章：变量作用域和内存问题
系列文章目录第二章:在html中使用javaScript 第三章:基本概念第四章:变量作用域和内存问题第五章:引用类型目录系列文章目录前言一.基本数据类型和引用类型的值? 1.数据类型 ...
JavaScript高级编程设计（第三版）——第三章：基本概念
系列文章目录第二章:在html中使用javaScript 第三章:基本概念第四章:变量作用域和内存问题目录系列文章目录前言一.语法 1.标识符 2.关键字和保留字二.数据类型 1.nul ...

JavaScript高级编程——BOM

JavaScript高级编程——BOM相关推荐

最新文章

热门文章