8.1 window对象
BOM对象的核心是window,表示浏览器的一个实例。
在浏览器中,window既是javascript访问浏览器的一个接口,又是ECMAScript规定的global对象。
8.1.1 全局作用域
8.1.2 窗口关系和框架
如果页面中包含框架,则每个框架都有自己的window对象,保存在frames集合中。
可以通过window.frames[0]或window.frames[framesName]来引用。但最好使用top。
8.1.3 窗口位置
moveTo() 接收新位置的x和y坐标值
moveBy() 接收新位置的水平和垂直方向上移动的像素值
注:可能会被浏览器禁用
不适应框架,只能对最外层的window对象使用
8.1.4 窗口大小
//取得页面视口大小的方法 var pageWidth = window.innerWidth, pageHeight = window.innerHeight; if (typeof pageWidth != "number"){ //检查pageWidth保存的是否为数值 if (document.compatMode == "CSS1Compat"){ //如果不是,检查document.compatMode确认页面是否处于标准模式 pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; } else { pageWidth = document.body.clientWidth; pageHeight = document.body.clientHeight; } } alert("Width: " + pageWidth); alert("Height: " + pageHeight);risizeTo() 接收浏览器窗口的新宽度和高度
resizeBy() 接收新窗口与原窗口的宽度和高度之差。
注:可能会被浏览器禁用
不适应框架,只能对最外层的window对象使用
8.1.5 导航和打开窗口
window.open()调用close()方法可以关闭打开的窗口
wroxWin.close()
8.1.6 间歇调用和超时调用
setTimeout()
clearTimeout()
//不要传递字符串,会影响性能 setTimeout("alert('Hello world!') ", 1000); //推荐调用方式 setTimeout(function() { alert("Hello world!"); }, 1000);
//设置超时调用 var timeoutId = setTimeout(function() { alert("Hello world!"); }, 1000); //把它取消 clearTimeout(timeoutId);
setInterval()
clearInterval()
8.1.7 系统对话框
alert() 接受一个字符串显示出来
confirm() 警告对话框,有确认取消选择
prompt() 提示框,提示用户输入文本
8.2 location对象
既是window对象的属性,也是document对象的属性 window.location==document.location
8.2.1 查询字符串参数
location.search返回从问号到url末尾的内容,不能逐个访问其中的每个查询字符串参数。
function getQueryStringArgs(){ //取得查询字符串并去掉开头的? var qs = (location.search.length > 0 ? location.search.substring(1) : ""); //保存数据的对象 var args = {}; //取得每一项 var items = qs.split("&"); var item = null, name = null, value = null; //依次将每一项添加到args对象中 for (var i=0; i < items.length; i++){ item = items[i].split("="); name = decodeURIComponent(item[0]); value = decodeURIComponent(item[1]); args[name] = value; } return args; } //假如查询字符串是 ?q=javascript&num=10 var args = getQueryStringArgs(); alert(args["q"]); //"javascript" alert(args["num"]); //"10"
8.2.2 位置操作
一般使用location.href()
但是通过location.href会是浏览器中生成一条新记录,因此用户单击“后退”按钮都会导航到前一个页面,要禁用这种行为,可以使用location.replace方法。
location.reload(); //重新加载(有可能从缓存中加载)
location.reload(true); //重新加载(从服务器重新加载);
最好将reload()放在代码的最后一行
8.3 navigator对象
识别客户端的事实标准
8.3.1 检测插件
非ie用plugins数组,包含的属性
name:插件名
description: 插件描述
filename: 插件的文件名
length: 插件所处理的MIME类型数量
//检测插件,在ie中无效 function hasPlugin(name){ //要检查的插件名 name = name.toLowerCase(); //将传入的名称转换为小写,方便比较 for (var i=0; i < navigator.plugins.length; i++){//迭代plugins数组 if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){ //通过indexOf()检测每个name属性,以确认传入的name是否出现在字符串的某个地方避免混淆 return true; } } return false; } //检测 flash alert(hasPlugin("Flash")); //检测 quicktime alert(hasPlugin("QuickTime")); //检测 Java alert(hasPlugin("Java"));
//检测ie中的插件 function hasIEPlugin(name){ try { new ActiveXObject(name); return true; } catch (ex){ return false; } } //检测 flash alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash")); //检测 quicktime alert(hasIEPlugin("QuickTime.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());
8.3.2 注册处理程序
FireFox 2.0为navigator新增registerContentHandler 和 registerProtocolHandler 的方法。(这两个方法在html5中有定义)。可以让一个站点指明它可以处理特定类型的信息。
registerContentHandler接受三个参数:要处理的MIME类型、可以处理该MIME类型的页面的URL以及应用程序的名字。
8.4 screen对象
用处不是很大,主要存储浏览器窗口外部的显示器的信息,如像素宽度和高度等。每个浏览器中的screen对象都包含着各不相同的属性。
//不一定所有环境有效
window.resizeTo(screen.availWidth, screen.availHeight);
8.5 history对象
用处不是很大,主要存储浏览器窗口外部的显示器的信息,如像素宽度和高度等。每个浏览器中的screen对象都包含着各不相同的属性。
history.go(-1) | history.back(); //后退一页 history.go(1) | history.forward();//前进一页 history.go(n);//前进n页 history.go(‘baidu.com’);//跳转到最近的baidu页面 也可以使用back()和foward()代替
history还有一个length属性,保存着历史记录的数量。如果history.lenght 等于 0,那么应该是用户打开窗口后的第一个页面