BOM-之-window对象和location对象的属性和方法

1 篇文章 0 订阅

window 对象

      BOM 的核心是 window 对象,表示浏览器打开的窗口的实例。如果文档包含框架(frame 或 iframe 标签),浏览器会为每个框架创建一个额外的 window 对象。

      window 对象在浏览器中有两重身份,一个是 ECMAScript 中的 Global 对象,另一个就是浏览器窗口的 JavaScript 接口。

Global作用域

      window 对象被复用为 ECMAScript 的 Global 对象,所以在全局作用域中声明的所有变量和函数,就都成为了 window对象的属性。很多浏览器API及相关构造函数 都以 window 对象属性的形式暴露出来。
      而ECMAScript 没有指出如何直接访问 Global 对象,Global对象只是作为window 对象的一部分加以实现的。

窗口关系

top 对象始终指向最上层(最外层)窗口,即浏览器窗口本身。
parent 对象则始终指向当前窗 口的父窗口。
self 对象始终会指向 window对象

窗口位置

window窗口位置属性:
IE、Safari 和 Opera :
      screenLeft:只读整数,表示窗口相对于屏幕左侧的像素值
      screenTop:只读整数,表示窗口相对于屏幕顶部的像素值
Firefox 和 Safari :
      screenX:只读整数,表示窗口相对于屏幕左侧的像素值
      screenY:只读整数,表示窗口相对于屏幕顶部的像素值

window窗口位置方法:
      moveTo(0,0):接收两个参数,把窗口的左上角移动到一个指定的坐标。
      moveBy(0, 100):接收两个参数,相对当前窗口坐标把它移动指定的像素

窗口大小

window窗口大小属性:
     innerWidth:浏览器窗口中文档显示区的宽度(不包含浏览器边框和工具栏)
     innerHeight:浏览器窗口中文档显示区的高度(不包含浏览器边框和工具栏)
     outerWidth:浏览器窗口自身的宽度
     outerHeight:浏览器窗口自身的高度
     screen.height:屏幕分辨率高
     screen.width:屏幕分辨率宽

窗口位置

window窗口位置方法:
      scrollTo() 把内容滚动到指定的坐标。
      scrollBy() 相对于当前视口按照指定的像素值来滚动内容。

导航与打开新窗口

      window.open()方法可以用于导航到指定 URL,也可以用于打开新浏览器窗口,或查找一个已命名的窗口。
      这个方法接收 4 个参数:

  1. 要加载的 URL
  2. 目标窗口名称name,该字符声明了新窗口的名称。这个名称等同于<a>属性 target 的值。如果该参数指定了一个已经存在的窗口名称,那么 open() 方法就不再创建一个新窗口,而只是返回对指定窗口的引用。在这种情况下,features 将被忽略。
  3. 声明了新窗口要显示的标准浏览器的特征features。如果省略该参数,新窗口将具有所有标准特征。
  4. 一个可选的布尔值replace。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。这个参数只有在不打开新窗口时才会使用。

      当第二个参数不是已有窗口,则会打开一个新窗口或者标签页。则第三个参数是窗口的特定字段,不传会带有所有默认的浏览器特性(工具栏,地址栏,状态栏);当第二个参数是已有窗口,则会忽略第三个参数;
      第三个参数特性字符串是一个逗号分隔的设置字符串,用于指定新窗口包含的特性。下表列出了一些选项。

字符串说明
fullscreen=yes/no/1/0表示新窗口是否全屏模式。仅限 IE 支持,默认是 no;
height=pixels窗口文档显示区的高度。以像素计;值最小是100,小于100按100算;
width=pixels窗口文档显示区的宽度。以像素计;值最小是100,小于100按100算;
left=pixels窗口的 x 坐标。以像素计;值最小是0,负数按0算;
top=pixels窗口的 y 坐标。以像素计;值最小是0,负数按0算;
location=yes/no/1/0是否显示地址栏。不同浏览器的默认值也不一样。在设置为"no"时,地址栏 可能隐藏或禁用(取决于浏览器);
menubar=yes/no/1/0是否显示菜单栏。默认为no
resizable=yes/no/1/0窗口是否可调节尺寸。默认是 yes;
scrollbars=yes/no/1/0是否显示滚动条。默认是 yes;
titlebar=yes/no/1/0是否显示标题栏。默认是 yes;
toolbar=yes/no/1/0是否显示浏览器的工具栏。默认为no;

注意:这些设置需要以逗号分隔的名值对形式出现,其中名值对以等号连接。(特性字符串中不能包含空 格。)

窗口不会跟踪记录自己打开的新窗口, 因此开发者需要自己记录。

let wroxWin = window.open("http://www.wrox.com/", "wroxWindow",
"height=400,width=400,top=10,left=10,resizable=yes");
// 缩放 
wroxWin.resizeTo(500, 500);
// 移动 
wroxWin.moveTo(100, 100);
// 关闭
wroxWin.close();

定时器

JavaScript 在浏览器中是单线程执行的,但允许使用定时器指定在某个时间之后或每隔一段时间就 执行相应的代码。

setTimeout():在指定的毫秒数后调用函数或计算表达式。
clearTimeou():取消由 setTimeout() 方法设置的 timeout。
setInterval(): 按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval():取消由 setInterval() 设置的 timeout。

setTimeout(code,millisec):
接收两个参数:要执行的代码和在执行回调函数前等待的时间(毫秒)。

参数描述
code必需。要调用的函数后要执行的 JavaScript 代码串。
millisec必需。在执行代码前需等待的毫秒数。

      第二个参数是要等待的毫秒数,而不是要执行代码的确切时间。JavaScript 是单线程的,所以每次只能执行一段代码。为了调度不同代码的执行,JavaScript 维护了一个任务队列。其中的任务会按照添加到队列的先后顺序执行。setTimeout()的第二个参数只是告诉 JavaScript 引擎在指定的毫秒数过后 把任务添加到这个队列。如果队列是空的,则会立即执行该代码。如果队列不是空的,则队列的执行时间需要等到前面的任务执行完才会执行,也就是等待所有的可执行代码执行完毕,才会轮到setTimeout执行其内部操作,并且按照其时延时间长短顺序执行代码!

     要取消等待中的排期任务,可以调用 clearTimeout()方法并传入超时 ID;只要是在指定时间到达之前调用 clearTimeout(),就可以取消超时任务。在任务执行后再调用 clearTimeout()没有效果。

注意:所有超时执行的代码(函数)都会在全局作用域中的一个匿名函数中运行,因此函 数中的 this 值在非严格模式下始终指向 window,而在严格模式下是 undefined。如果 给 setTimeout()提供了一个箭头函数,那么 this 会保留为定义它时所在的词汇作用域。

setInterval()与 setTimeout()的使用方法类似,只不过指定的任务会每隔指定时间就执行一
次,直到取消循环定时或者页面卸载

注意:这里的关键点是,第二个参数,也就是间隔时间,指的是向队列添加新任务之前等待的时间。比如,调用 setInterval()的时间为 01:00:00,间隔时间为 3000 毫秒。这意味着 01:00:03 时,浏览器会把任务添加到执行队列。浏览器不关心这个任务什么时候执行或者执行要花多长时间。因此,到了 01:00:06,它会再向队列中添加一个任务。由此可看出,执行时间短、非阻塞的回调函数比较适合 setInterval()。

系统对话框

alert():显示带有一段消息和一个确认按钮的警告框。
confirm(): 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt(): 显示可提示用户输入的对话框。
print(): 显示打印对话框。
find(): 显示查找对话框。

      这些对话框与浏览器中显示的网页无关,而且也不包含 HTML。它们的外观由操作系统或者浏览器决定, 无法使用 CSS 设置。这些对话框都是同步的模态,即在它们显示的时候,代码会停止执行, 在它们消失以后,代码才会恢复执行。

      alert()只接收一个参数。对话框只有一个“OK”(确定)按钮。如果传给 alert()的参数不是一个原始字符串,则会调用这个值的 toString()方法将其转换为字符串。

      confirm()确认框有两个按钮:“Cancel”(取消)和“OK”(确定)。返回一个boolean值,true 表示单击 了 OK 按钮,false 表示单击了 Cancel 按钮或者通过单击某一角上的 X 图标关闭了确认框。# location 对象

if (confirm("你去确定吗?")) {
 	alert("你点击了确定按钮");
} else {
	alert("你点击了取消按钮.");
}

      prompt()方法接收两个参数: 要显示的文本,以及文本框的默认值(可以是空字符串)。如果用户单击了 OK 按钮,则 prompt()会返回文本框中的值。如果用户单击了 Cancel 按钮,或者对话框被关闭,则 prompt()会返回 null。

let result = prompt("What is your name? ", "");
if (result !== null) { 7
  alert("Welcome, " + result);
}

location 对象

      location 是最有用的 BOM 对象之一。
      这个对象独特的地方在于,它既是 window 的属性,也是 document 的属性。也就是说, window.location 和 document.location 指向同一个对象。
     location 对象不仅保存着当前加载文档的信息,以及导航功能。也保存着把 URL 解析为离散片段后能够通过属性访问的信息。

location 对象的属性

      假设URL是 http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q= javascript#contents,location 对象的属性如下表所示。

属性描述
hash“#contents”设置或返回从井号 (#) 开始的 URL(锚)。如果没有则为空字符串
host“www.wrox.com:80”设置或返回服务器名和当前端口号。
hostname“www.wrox.com”设置或返回服务器名
href“http://www.wrox.com:80/WileyCDA/ ?q=javascript#contents”设置或返回完整 URL。location 的 toString() 方法返回这个值
pathname“/WileyCDA/”设置或返回当前 URL 的路径部分。
port“80”设置或返回当前 URL 的端口号。没有端口,则返回空字符串;
protocol“http:”设置或返回当前 URL 的协议。通常是"http:“或"https:”
search“?q=javascript”设置或返回URL 的查询字符串。这个字符串以问号开头
username“foouser”设置或返回域名前指定的用户名
password“barpassword”设置或返回域名前指定的密码
origin“http://www.wrox.com”URL 的源地址。只读

Location 对象方法

方法说明
assign()接收一 个 URL,修改浏览器的地址,加载新的页面文档。
replace()接收一个 URL 参数,但重新加载后不会增加历史记录。调用 replace()之后,用户不能回到前一页。
reload()重新加载当前显示的页面。调用 reload()而不传参 数,页面会以最有效的方式重新加载。

如果给 location.href 或 window.location 设置一个 URL,也会以同一个 URL 值调用 assign()方法。比如,下面两行代码都会执行与显式调用 assign()一样的操作:

window.location = "http://www.wrox.com"; 
location.href = "http://www.wrox.com";
//等同于
location.assign("http://www.wrox.com");

这3 种修改浏览器地址的方法中,设置 location.href 是最常见的。

注意:1. 除了 hash 之外,只要修改 location 的一个属性,就会导致页面重新加载新 URL。
2.修改hash的值会在浏览器历史中增加一条新记录。

      reload()也可以修改地址,它能重新加载当前显示的页面。调用 reload()而不传参数,页面会以最有效的方式重新加载。
      如果页面自上次请求以来没有修改过,浏览器可能会 从缓存中加载页面。如果想强制从服务器重新加载,可以像下面这样给 reload()传个 true:

location.reload(); // 重新加载,可能是从缓存加载 
location.reload(true); // 重新加载,从服务器加载

脚本中位于 reload()调用之后的代码可能执行也可能不执行,这取决于网络延迟和系统资源等因 素。为此,最好把 reload()作为最后一行代码。

参考文献: javascript 高级程序设计 第4版

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值