#JavaScript学习#第8章：BOM

Avery_66
304 阅读7分钟

Tips: 内容为知识梳理

目录

  1. window对象

  2. location对象

  3. navigator对象

  4. screen对象

  5. history对象

1. window对象

window对象是ECMAScript规定的Global对象

1.1 全局作用域

  • 全局作用域中声明的变量，函数，都会变成window对象的属性和方法。
  • 但定义全局变量与在window直接定义属性不同，定义的全局变量不能通过delete来删除
  • 通过window可以查询一个变量是否存在，不存在则返回undefined而不是报错

1.2 窗口关系及框架

  • 页面包含框架，每个框架都有自己的window对象，存于frames集合(数组)中
  • 可通过frames的数值索引，frames[name]，来访问相应框架数值排序为从上到下，从左到右，例子如下
<html>
	<head>
		<title>Frameset Example</tltle>
	</head>
	<frameset row="160,*">
		<frame src="frame.htm" name="topFrame">
		<frameset cols="50%,50%">
			<frame src="anotherframe.htm" name="leftFrame">
			<frame src="yetanotherframe.htm" name="rightFrame">
		</frameset>	
</html>

以上代码中，可以用window.frames["topFrame"]来访问顶部框架，也可以用top.frames["topFrame"]来访问这个框架，其中top是指向最高层框架而window是指当前框架的特定实例

  • 加入框架集中又包含另一个框架集，可以用parent对象来访问上一层的框架集
  • self对象始终指向window

1.3 窗口位置

window对象中用screenLeft和screenTop或screenX和screenY属性来确定窗口位置，不同浏览器支持的属性不同 用以下代码可以跨浏览器获取window位置信息

var leftPos =(typeof window.screenLeft == "number")? window.screenLeft:window.screenX;
var topPos =(typeof window.screenTop == "number")? window.screenTop:window.screenY;
  • 用moveTo()和moveBy()可以将窗口精确的移动到一个新位置，前者接受新位置的x，y值，后者接收在水平和垂直方向上移动的像素数

1.4 窗口大小

  • 在IE9+、Safari和Firefox中，outerWidth和outerHeight返回浏览器窗口本身尺寸，在Opera中，这两个属性返回页面视图容器的大小，而innerWidth和innerHeight表示该容器中页面视图区的大小。在Chrome中，上述四个属性返回相同的值。
  • 在IE、Firefox、Safari、Opera和Chrome中，document.documentElement.clientWidth和document.documentElement.clientHeight保存了页面视口信息。
  • 用resizeTo()和resizeBy()方法可以调整浏览器窗口大小，操作方法和前面的窗口位置一样

1.5 导航和打开窗口

window.open()方法可以导航到一个特定的url，接受四个参数，url、窗口目标、 一个特性字符串、一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。对于传入的第二个参数，它与<a>标签里面的target的值相似，指定在哪打开这个url，可以是已有的窗口名称，也可以是_blank等等

1. 弹出窗口
  • 如果第二个参数不是已有的窗口，那么就会根据第三个参数的字符串创建一个新的窗口
  • 若第三个参数也没有，那么就会创建一个带有全部默认设置的新窗口
  • 在不打开新窗口时，第三个参数被忽略
  • 第三个参数是一个以逗号分隔的设置字符串，表示新窗口显示哪些特性，下面是部分设置选项

  • 字符串格式："width=100,height=100"
  • open方法放回一个指向新窗口的引用(对象)
  • 用对象中的close方法关闭这个窗口
  • closed属性代表是否关闭
  • opener属性是打开它的原始窗口对象
2. 安全限制

不同浏览器采取不同方式来限制广告

3. 弹出窗口屏蔽程序
  • 用户可以将绝大多数不想看到的弹出窗口屏蔽掉
  • 如果是浏览器内置的屏蔽程序阻止的弹出窗口，那么window.open()会返回null

1.6 间歇调用和超时调用

  • js允许通过设置超时值和间歇时间值来调度代码在特定时刻执行
  • 前者指的是在指定时间后执行代码，后者指每隔一段时间执行代码
  • setTimeout()方法是超时调用，接受两个参数，要执行的代码和毫秒数
  • 该方法返回一个数值ID，表示超时调用，是计划执行代码的唯一标识符可以用clearTimeout来取消这个ID的超时调用
  • 用setInterval()方法来进行间歇调用，参数即返回值与前者类似，取消间歇调用比较重要

1.7 系统对话框

  • 用alert、confirm、prompt方法来调用系统对话框来向用户显示信息
  • confirm()方法返回一个布尔值，表示用户点击了ok还是取消
  • prompt是一个提示框，除了ok和取消之外，还有一个文本输入框，接受两个参数，显示给用户的提示和文本输入域的默认值
  • 若用户单击ok按钮则返回文本框的值，否则返回null

2. location对象

  • location对象提供了与当前窗口加载的文档有关的信息
  • 它是window对象和document对象的属性
  • 下面是location的所有属性

2.1 查询字符串参数

可以像下面这样创建一个函数用以解析查询字符串，然后返回包含所有参数的一个对象

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"

2.2 位置操作

  • 用assign()方法传入一个URL，并立即打开新的这个URl，并在历史记录生成一个记录

  • 若把location.href或window.location设置为一个URL值效果也和上面一样

  • 在修改浏览器位置的方法中最常用的是location.href属性

  • 下面是一些修改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;

  • 上述方法每次修改url都会生成一条记录，用户单击后退按钮就会返回上一次修改的url

  • 用replace()方法禁用这种行为，这个方法接受一个要导航到的URL，但不会在历史记录中被记录

  • 用reload()方法重新加载页面

3. navigator对象

navigator对象是识别客户端浏览器的标准，下表列出存于所有浏览器的属性和方法

3.1 检测插件

用plugins数组来检测浏览器是否安装了特定插件 数组每一项包含下列属性

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

在Firefox、Safari、Opera、Chrome中用下面方法检测插件

    //检测插件（在 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")); 
	//检测 QuickTime 
	alert(hasPlugin("QuickTime"));

用下面方法检测所有浏览器的插件

//检测所有浏览器中的Flash 
function hasFlash(){     
var result = hasPlugin("Flash");     
if (!result){        
 result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");     
 }
 return result; 
 } 
//检测所有浏览器中的QuickTime 
function hasQuickTime(){     
var result = hasPlugin("QuickTime");     
if (!result){         
result = hasIEPlugin("QuickTime.QuickTime");     
}     
return result; 
} 
//检测 Flash 
alert(hasFlash()); 
//检测 QuickTime 
alert(hasQuickTime());

3.2 注册处理程序

Firefox2为navigator对象新增 registerContentHandler()和registerProtocolHandler()方法，这两个方法可以让一个站点指明它可以处理特定类型的信息。

  • 前者接受三个参数，要处理的MIME类型、可以处理该MIME类型的页面的URL、应用程序的名称
  • 后者也接受三个参数，要处理的协议、处理该协议的页面的URL、应用程序名称

4. screen对象

screen对象基本只用来表明客户端能力，如浏览器外部的显示器信息，下表列出所有属性及支持相应属性的浏览器

5. history对象

history对象用于保存历史记录，每个浏览器窗口、标签页、框架都有自己的history对象与特定的window对象关联

  • 用go()方法可以在用户的历史记录中随意跳转，接受一个要跳转的页面数，向前或向后跳转
  • 也可以传一个字符串，就会跳转到包含该字符串最近的URL页面
  • 用back()和forward()来前进一页或后退一页
avatar
文章
阅读
粉丝