js学习小结（六）2014.5.2(BOM对象)

来源：互联网发布：剑三萝莉捏脸数据南风编辑：程序博客网时间：2024/05/22 11:43

BOM （Browser Object Model浏览器对象模型）以window对象为依托，表示浏览器窗口和页面可见区域。主要学习了以下几个全局对象“

1 history对象

实现前进和后退。主要方法有三个：

history.go(num);//num为正数表示前进，num为负数表示后退

history.back();history.forward();

history.length==0；表示当前页面是浏览器打开的第一个页面。

2.navigator对象

此处只是了解了一下navigator检测插件的方法，有关于useragent的方法，明天再学。

在ie11和其他浏览器中，可以通过navigator.plugins来获取浏览器的插件信息，该属性返回的是一个数组，数组中是一个个插件对象，该对象有四个属性，name，filename，description，length，分别表示插件的名字，文件名，描述以及支持的MIME的种类数。

在低版本的ie中，所有的插件都是通过COM组件实现的，必须通过COM标识符来确定一个COM组件，ActiveXObject。测试代码如下：测试ie浏览器中是否有该插件：

//测试低版本ie中是否有某插件

function hasIEplugin(name){try{new ActiveXObject(name);return true;}catch(ex){return false;}}

//罗列出所有的插件，适用于其他浏览器和ie11

function(){var plugins=navigator.plugins;var plugin; alert("begin"+plugins.length);for(var i=0,len=plugins.length;i<len;i++){plugin=plugins[i];document.writeln(plugin.name+","+plugin.description+","+plugin.filename+","+plugin.length+"<br>");}alert("end");}

专家建议测试不同的组件采用不同的测试方法，流程：先测试navigator.plugins中是否有该插件，如果没有再测试ie中是否有该插件。

3.location对象

location既是document的对象又是window的对象，location有两个主要功能：

（1）提供当前窗口加载的文档的相关信息。有以下属性：

host，hostname,protocol,port,pathname,search,hash,href

（2）进行导航

window.location=url;/location.href=url，都可以进行重定向；

通过修改location的属性页会改变当前加载的页面，同时浏览器中会生成一条新纪录；

如果不想生成新的历史记录，可以通过location.replace(url)进行重定向。

重新加载当前页面，使用reload()；该方法可以带一个bool参数，如果为true表示必须从服务器端加载新页面，不能从缓存中取页面。

4.系统对话框

alert，confirm，prompt，print，find。其中的prompt，如果用户输入了信息，并且点击了确定按钮，就会返回输入的内容，其他任何操作都会返回null；

5.window.open()

该方法可以传入三个参数，其中第一个参数是一个要打开的页面的url，第二个参数是一个frame的名字，这个名字可以是不存在的，如果不存在就会打开一个新的标签页，第三个参数是一个字符串，定义新打开窗口的一些特性信息，典型的第三个参数值（”top=20px,left=30px,width=200px,height=300px,resizable=yes,toolbar=yes,location=no,menubar=yes,status=yes“），该方法返回一个指向该window的引用，利用这个引用可以进行resizeTo，moveTo等操作。

该方法还需要注意以下两点：

（1）如果此处的url与主页面是同源（协议，域名。端口相同），那么在非chrome浏览器中，无论是通过服务器访问该页面还是通过本地页面进行访问，都可以在两个不同的方法中分别执行open和moveTo操作，但是在chrome中，必须通过服务器访问该页面，才可以在两个不同的方法中分别执行open和moveTo方法。

（2）如果此处的url与主页面不同源，在所有浏览器中，无论是通过服务器还是通过本地页面进行访问，都无法在两个不同的方法中分别执行open和moveTo方法。

测试代码如下，可以通过直接访问本地页面和通过服务器访问页面两个不同方式进行检测：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>打开窗口</title><script type="text/javascript">var w;function openAwindow(){//w=window.open("windowPostion.html","baiduwindow","location=no,menubar=no,scrollbars=no,toolbar=no");//打开同源页面,则在除了chrome的浏览器中，都能正常执行 moveAwindow方法 ，chrom中必须通过服务器，下面的 moveAwindow方法才能正常执行w=window.open("http://www.baidu.com","baiduwindow","location=no,menubar=yes,scrollbars=no,toolbar=no");//打开非同源页面，无论哪个浏览器无论是否经过服务器，下面的 moveAwindow方法都不能正确执行 //w.moveTo(20,20);//无论是不是经过服务器访问这个网页，chrome都不会报错}function moveAwindow(){if(!w) console.log('it is null');w.moveTo(100,120);}function closeAwindow(){w.close();}</script></head><body><input type="button" onclick="openAwindow()" value='openWindow'/><input type="button" onclick="moveAwindow()" value='moveWindow'/><input type="button" onclick="closeAwindow()" value='cloaseWindow'/></body></html>

所有的closewindow的方法都能正确执行。

6.还有一些有关框架frameset方面的知识。

（1）每个frame都有一个window对象，不同的frame的window对象不同。

（2）通过window.frames可以获取一个window中的frames，可以通过位置或者名字来获取一个frame。

（3）top对象始终执行最外围的框架，parent指向包含本框架的框架，self回指本框架。

0 0