今天是我在乐字节学习的第八天,学了有一个星期之后还是提升了不少,老师讲课也易懂,讲课方式也是很nice的哦,幽默风趣,我也是从小白刚开始接触的,学习一周下来,收获不少呀,下面是我今天学习的内容:
如果在web中使用JavaScript,BOM(浏览器对象模型)便是其核心。BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关 下图为DOM与BOM的关系
1.window对象
8.1.1全局作用域
所有在全局作用域中声明的变量,函数都会变成window对象的属性和方法。例: var age=12; function sayAge(){ alert(this.age); } alert(window.age); //12 sayAge(); //12 window.sayAge(); //12 例子中的age变量和sayAge()函数,被自动归为window对象。
1.2窗口关系及框架
如果页面中包含框架,则每个框架都拥有自己的 window 对象,并且保存在 frames 集合中。
<html>
<frameset>
<frame src="frame.htm" name="topFrame">
<frameset cols="50%,50%">
<frame src="a" name="leftFrame">
<frame src="b" name="rightFrame">
</frameset>
</frameset>
</html>
复制代码
top
不过最好使用 top 来引用这些框架>(top.frames[0]),因为 top 对象始终指向最高>(最外)层的框架,也就是浏览器窗口。使用它可以确保在一个框架中正确地访问另一个框架。
因为对于在一个框架中编写的任何代码来说,其中的 window 对象指向的都是那个框架的特定实例,而非最高层的框架。
parent
与 top 相对的另一个 window 对象是 parent。顾名思义,parent(父)对象始终指向当前框架的直接上层框架。
在某些情况下,parent 有可能等于 top;但在没有框架的情况下,parent 一定等于 top(此时它们都等于 window)。
self
与框架有关的最后一个对象是 self,它始终指向 window;实际上,self 和 window 对象可以互换使用。引入 self 对象的目的只是为了与 top 和 parent 对象对应起来,因此它不格外包含其他值。
所有这些对象都是 window 对象的属性,可以通过 window.parent、window.top 等形式来访问。同时,这也意味着可以将不同层次的 window 对象连缀起来,例如 window.parent.parent.frames[0]。
1.3窗口位置
IE,Safari,Opera和Chrome都提供了screenLeft属性和screenTop属性,分别用于表示窗口相对于屏幕左边和上边的位置。 Firefox则提供了screenX和screenY的属性,提供相同的窗口信息,Safari和Chrome也同时支持两个属性。 例: var left=(typeof window . screenLeft == "number")? window . screenLeft : window . screenX; var top = (typeof window . screenTop == "number")? window . screenTop : window . screenY; 例子中利用二元操作符先确定screenLeft和screenTop属性是否存在,若存在,则取得两个属性的值。若没有,则取得 screenX和 screenY的值。
使用moveTo()和moveBy()方法也可取得窗口的精确值 例: window.moveBy(100,100); // 将窗口向右下方向各移动100像素 window.moveTo(100,100); //将窗口移动到(100,100)处
1.4窗口大小
窗口大小 打开窗口,具有4个属性:
innerWidth、innerHeight、outerWidth 和 outerHeight。 另外resizeTo()和resizeBy()方法可调整浏览器窗口的大小。不过,resizeBy()接收的是新窗口与旧窗口的宽度和高度之差。例: window.resizeTo(100,100); //调整到100100 window.resizeBy(100,50); //调整到200150
1.5导航与打开窗口
window.open()方法可以导航到一个特定的url,接受四个参数,url、窗口目标、 一个特性字符串、一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。对于传入的第二个参数,它与标签里面的target的值相似,指定在哪打开这个url,可以是已有的窗口名称,也可以是_blank等等
1.6弹出窗口
1:如果第二个参数不是已有的窗口,那么就会根据第三个参数的字符串创建一个新的窗口 2.若第三个参数也没有,那么就会创建一个带有全部默认设置的新窗口 3.在不打开新窗口时,第三个参数被忽略 4.第三个参数是一个以逗号分隔的设置字符串,表示新窗口显示哪些特性,下面是部分设置选项
1.7系统对话框
浏览器通过 alert()、confirm()和 prompt()方法可以调用系统对话框向用户显示消息
alert()方法:接受一个字符串并将其显示给用户
显示一个系统对话框,其中包含指定的文本和一个 OK(“确定”)按钮
第二种对话框是调用 confirm()方法生成
注:二者的主要区别在于“确认”对话框除了显示 OK按钮外,还会显示 一个 Cancel(“取消”)按钮,两个按钮可以让用户决定是否执行给定的操作
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; }
2.2位置操作
使用 location 对象可以通过很多方式来改变浏览器的位置
最常用:使用 assign()方法并为其传递一个 URL
修改location对象的其他属性也可以改变当前加载的页面
下面是一些修改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;
复制代码
三、navigator 对象
Navigator常见的对象属性如下:
appCodeName : 返回浏览器的代码名。
appMinorVersion : 返回浏览器的次级版本。
appName : 返回浏览器的名称。
appVersion : 返回浏览器的平台和版本信息。
browserLanguage : 返回当前浏览器的语言。
cookieEnabled : 返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass : 返回浏览器系统的 CPU 等级。
onLine | 返回指明系统是否处于脱机模式的布尔值。
platform : 返回运行浏览器的操作系统平台。
systemLanguage : 返回 OS 使用的默认语言。
userAgent : 返回由客户机发送服务器的 user-agent 头部的值。
userLanguage : 返回 OS 的自然语言设置。
每个浏览器中的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 对象基本上只 用来表明客户端的能力,其中包括浏览器窗口外部的显示器的信息,如像素宽度和高度等。每个浏览器 中的 screen 对象都包含着各不相同的属性,下表列出了所有属性及支持相应属性的浏览器。
5. history对象
history对象用于保存历史记录,每个浏览器窗口、标签页、框架都有自己的history对象与特定的window对象关联
用go()方法可以在用户的历史记录中随意跳转,接受一个要跳转的页面数,向前或向后跳转
也可以传一个字符串,就会跳转到包含该字符串最近的URL页面
用back()和forward()来前进一页或后退一页