第八章 BOM

hghh
127 阅读7分钟

window对象

全局作用域

  1. 全局变量和window对象属性的区别

    • 全局变量（有一个名为[[Configurable]]的特性，值为false）不能通过delete操作符删除，window对象属性可以通过delete操作符删除

    • 访问未定义的变量会报错，通过查询window对象，可以得知某个可能未声明的变量是否存在 var age = 10 window.color = "yellow" delete window.age delete color console.log(age)//10 console.log(window.color)//undefined

      //报错，因为oldValue没有定义 var newValue = oldValue //不会报错，因为这是一次属性查询，newValue值为undefined var newValue = window.oldValue

窗口关系及框架

如果页面中包含框架，则每个框架都拥有自己的 window 对象，并且保存在 frames 集合中。在 frames集合中，可以通过数值索引（从 0 开始，从左至右，从上到下）或者框架名称来访问相应的 window 对象。每个 window 对象都有一个 name 属性，其中包含框架的名称。

<html> 
    <head> 
        <title>Frameset Example</title> 
 	</head> 
 	<frameset rows="160,*"> 
 		<frame src="frame.htm" name="topFrame"> 
 		<frameset cols="50%,50%"> 
 			<frame src="anotherframe.htm" name="leftFrame"> 
			<frame src="yetanotherframe.htm" name="rightFrame"> 
	 	</frameset> 
 	</frameset> 
</html>
  • window对象：每个框架下的全局对象，以下三个对象都是window对象的属性
  • top对象：始终指向浏览器窗口，即最高层的框架，使用它可以确保在一个框架中正确地访问另一个框架
  • parent对象：始终指向当前框架的直接上层框架。在某些情况下，parent 有可能等于 top；在没有框架的情况下，parent 一定等于top（此时它们都等于 window）
  • self对象：与window对象一样，可以互换

引用上例中每个框架的方式

window.frames[0]、window.frames["topFrame"]、top.frames[0]、top.frames["topFrame"]、frames[0]、frames["topFrame"]、parent.frames[0]、parent.frames["topFrame"]
windows.frames[1]、windows.frames["leftFrame"]、top.frames[1]、top.frames["leftFrame"]、frames[1]、frames["leftFrame"]、parent.frames[1]、parent.frames["leftFrame"]
windows.frames[2]、windows.frames["rightFrame"]、top.frames[2]、top.frames["rightFrame"]、frames[2]、frames["rightFrame"]、parent.frames[2]、parent.frames["rightFrame"]

窗口位置

窗口大小

导航和打开窗口

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

//等同于< a href="http://www.wrox.com" target="topFrame"></a> 
window.open("http://www.wrox.com/", "topFrame");

间歇调用和超时调用

  1. 超时调用：setTimeout()：两个参数（要执行的代码、毫秒表示的时间）。该方法会返回一个数值 ID，这个 ID 是计划执行代码的唯一标识符，可以通过它来取消超时调用。要取消尚未执行的超时调用计划，可以调用clearTimeout() 方法并将相应的超时调用 ID 作为参数传递给它。

    //设置超时调用
var timeoutId = setTimeout(function() { 
 alert("Hello world!"); 
}, 1000); 
//把它取消
clearTimeout(timeoutId);

  2. 间歇调用：setInterval()：两个参数（要执行的代码、毫秒表示的时间）。该方法会返回一个间歇调用 ID，该 ID 可用于在将来某个时刻取消间歇调用。要取消尚未执行的间歇调用，可以使用 clearInterval() 方法并传入相应的间歇调用 ID。取消间歇调用的重要性要远远高于取消超时调用，因为在不加干涉的情况下，间歇调用将会一直执行到页面卸载。

    var num = 0; 
var max = 10; 
var intervalId = null; 
function incrementNumber() { 
 	num++; 
 	//如果执行次数达到了 max 设定的值，则取消后续尚未执行的调用
 	if (num == max) { 
 		clearInterval(intervalId); 
 		alert("Done"); 
 	} 
} 
intervalId = setInterval(incrementNumber, 500);

在使用超时调用时，没有必要跟踪超时调用 ID，因为每次执行代码之后，如果不再设置另一次超时调用，调用就会自行停止。一般认为，使用超时调用来模拟间歇调用的是一种最佳模式。在开发环境下，很少使用真正的间歇调用，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。而像前面示例中那样使用超时调用，则完全可以避免这一点。所以，最好不要使用间歇调用。

系统对话框

  1. alert()

  2. confirm()：弹出一个对话框，让用户选择"确认"或者"取消“。为了确定用户是单击了 "确认"还是 "取消"，可以检查 confirm()方法返回的布尔值：true 表示单击了 "确认"，false 表示单击了 "取消"或单击了右上角的 X 按钮。

    if (confirm("Are you sure?")) { 
 	alert("I'm so glad you're sure! "); 
} else { 
 	alert("I'm sorry to hear you're not sure. "); 
}

  3. promt()：弹出一个“提示”框，提示用户输入一些文本。提示框中除了显示 "确认" 和 "取消" 按钮之外，还会显示一个文本输入域。接受两个参数：显示给用户的文本提示、文本输入域的默认值（可以是一个空字符串）。如果用户单击了 “确认”按钮，则 prompt() 会返回文本输入域的值；如果用户单击了 “取消”或没有单击“确认” 而是通过其他方式关闭了对话框，则该方法返回 null。

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

  4. 其他对话框：还有两个可以通过 JavaScript 打开的对话框，即“查找”和“打印”。这两个对话框都是异步显示 的，能够将控制权立即交还给脚本。这两个对话框与用户通过浏览器菜单的“查找”和“打印”命令打开的对话框相同。

    //显示“打印”对话框
window.print(); 
//显示“查找”对话框
window.find();

location对象

location既是window对象的属性，也是document对象的属性，即window.location和document.location引用的是同一个对象。

location所有属性

属性名例子说明
hash"#contents"返回URL中的hash（#号后跟零或多个字符），如果URL中不包含散列，则返回空字符串
host"www.wrox.com:80"返回服务器名称和端口号
hostname"www.wrox.com"返回不带端口号的服务器名称
href"http:/www.wrox.com"返回当前加载页面的完整URL。location对象的toString()方法也返回这个值
pathname"/WileyCDA/"返回URL中的目录和（或）文件名
port"8080"返回URL中指定的端口号。如果URL中不包含端口号，则这个属性返回空字符串
protocol"http:"返回页面使用的协议。通常是http:或https:
search"?q=javascript"返回URL的查询字符串。这个字符串以问号开头

位置操作

  • location.assign()方法：location.assign("www.wrox.com");
  • location.href属性、window.location属性：设置成一个URL值时，调用assign（）方法。
  • 改变location属性：每次修改 location 的属性（hash 除外），页面都会以新 URL 重新加载
//假设初始 URL 为 http://www.wrox.com/WileyCDA/ 
//将 URL 修改为"http://www.wrox.com/WileyCDA/#section1" 
location.hash = "#section1"; 
//将 URL 修改为"http://www.wrox.com/WileyCDA/?q=javascript" 
location.search = "?q=javascript"; 
//将 URL 修改为"http://www.yahoo.com/WileyCDA/" 
location.hostname = "www.yahoo.com"; 
//将 URL 修改为"http://www.yahoo.com/mydir/" 
location.pathname = "mydir"; 
//将 URL 修改为"http://www.yahoo.com:8080/WileyCDA/" 
location.port = 8080;
  • location.replace()：location.replace("www.wrox.com/");
  • location.reload()：重新加载当前显示的页面 location.reload(); //重新加载（有可能从缓存中加载） location.reload(true); //重新加载（从服务器重新加载）

浏览器会生成新记录，用户可以点击后退按钮回到前一个页面：location.assign()、location.href、window.location

浏览器不会生成新记录，用户不可用点击后退按钮回到前一个页面：location.replace()

navigator对象

navigator对象通常用于检测显示网页的浏览器类型

检测插件

对于非IE浏览器，可以使用navigator.plugins 数组来达到这个目的。该数组中的每一项都包含下列属性。

  • name：插件的名字
  • description：插件的描述
  • filename：插件的文件名
  • length：插件所处理的 MIME 类型数量

screen对象

history对象

history对象保存着用户的上网历史记录

  • history.go()：接收一个参数，负数向后跳转，正数向前跳转，字符串跳转到历史记录中包含该字符串的第一个位置——可能后退，也可能前进，具体要看哪个位置最近。如果历史记录中不包含该字符串，那么这个方法什么也不做。 例如跳转到最近的 wrox.com 页面：history.go("wrox.com");
  • history.back()：后退
  • history.forward()：前进
  • history.length：属性，保存着历史记录的数量。对于加载到窗口、标签页或框架中的第一个页面而言，history.length 等于 0。
avatar
文章
阅读
粉丝