码迷,mamicode.com
首页 > 其他好文 > 详细

学习第四天(2019-11-17)

时间:2019-11-17 23:28:23      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:cat   处理   typeof   禁用   注册   高度   实现   其他   外部   

第八章 BOM

    ECMAScript是JavaScript的核心,但如果要在Web中使用JavaScript,那么BOM(浏览器对象模型)则无疑才是真正的核心。BOM 提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。

一、window对象

BOW的核心对象是window对象,它表示浏览器的一个实例。在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是 ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数,都以window作为其Global对象,因此有权访问parseInt()等方法。

1、全局作用域

      a、所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法;

      b、全局变量不能通过 delete 操作符删除,而直接在window对象上的定义的属性可以;

      c、尝试访问未声明的变量会抛出错误,但是通过查询 window 对象,可以知道某个可能未声明的变量是否存在,如:

      d、var newValue = oldValue;  //报错,oldValue未定义 

      e、var newValue = window.oldValue;     //这里不会抛出错误,因为这是一次属性查询 ,newValue 的值是undefined

2、窗口关系及框架 

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

      b、top 对象始终指向高(外)层的框架,也就是浏览器窗口;

      c、与 top 相对的另一个 window 对象是 parent。parent(父)对象始终指向当前框架的直接上层框架;

          注意:除非高层窗口是通过 window.open()打开的,否则其 window 对象的 name 属性不会包含任何值;

      d、self对象始终指向window,self 和 window 对象可以互换使用。引入self 对象的目的只是为了与 top 和 parent 对象对应起来,因此它不格外包含其他值。

3、窗口位置

      a、screenLeft 和 screenTop 属性,分别用于表示窗口相对于屏幕左边和上边的位置,很多浏览器提供了这两个属性,但Firefox 则在 screenX 和 screenY 属性中提供相同的窗口位置信息,下列代码可以跨浏览器取得窗口左边和上边的位置:

1 var leftPos = (typeof window.screenLeft == "number") ?  
2                window.screenLeft : window.screenX; 
3 var topPos = (typeof window.screenTop == "number") ?
4                window.screenTop : window.screenY; 

       b、上述属性不同浏览器有些小的不同,使用 moveTo() 和 moveBy()方法倒是有可能将窗口精确地移动到一个新位置。

             这两个方法都接收两个参数,moveTo()接收的是新位置的 x和 y坐标值,而 moveBy()接收的是在水平和垂直方向上移动的像素数。

 

            需要注意的是,这两个方法可能会被浏览器禁用;而且,在 Opera和 IE 7(及更高版本)中默认就是禁用的。另外,这两个方法都不适用于框架,只能对外层的 window 对象使用 。

4、窗口大小

     跨浏览器确定一个窗口的大小不是一件简单的事,因为不同浏览器支持的属性不同。相关的4个属性:innerWidth、innerHeight、outerWidth 和 outerHeight。

     document.documentElement.clientWidth 和 document.documentElement.clientHeight 中保存了页面视口的信息,在 IE6中,这些属性必须在标准模式下才有效;如果是混杂模式,就必须通过document.body.clientWidth和document.body. clientHeight 取得相同信息。

     虽然终无法确定浏览器窗口本身的大小,但却可以取得页面视口的大小。

     使用 resizeTo()和 resizeBy()方法可以调整浏览器窗口的大小。

5、导航和打开窗口 

     使用 window.open()方法既可以导航到一个特定的 URL,也可以打开一个新的浏览器窗口。

6、间歇调用和超时调用 

     超时调用需要使用 window 对象的 setTimeout()方法,它接受两个参数:要执行的代码和以毫秒 表示的时间(即在执行代码前需要等待多少毫秒);

     间歇调用与超时调用类似,它会按照指定的时间间隔重复执行代码,直至间歇调用被取消或者页面被卸载,设置间歇调用的方法是 setInterval();

     一般认为,使用超时调用来模拟间歇调用的是一种佳模式。在开发环境下,很少使用真正的间歇调用,原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。

7、系统对话框

   a、浏览器通过 alert()、confirm()和 prompt()方法可以调用系统对话框向用户显示消息。

   b、除了上述三种对话框之外,Google Chrome浏览器还引入了一种新特性。如果当前脚本在执行过程 中会打开两个或多个对话框,那么从第二个对话框开始,每个对话框中都会显示一个复选框,以便用户阻止后续的对话框显示,除非用户刷新页面,后来又有其他浏览器实现了这个新特性。

   c、还有两个可以通过 JavaScript打开的对话框,即“查找”和“打印”。这两个对话框都是异步显示 的,能够将控制权立即交还给脚本。这两个对话框与用户通过浏览器菜单的“查找”和“打印”命令 打开的对话框相同。而在 JavaScript中则可以通过 window 对象的 find()和 print()方法 打开它们。 

二、location 对象 

    location 是最有用的 BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一 些导航功能。它既是 window 对象的属性,也是 document 对象的属性,所以,window.location 和 document.location 引用的是同一个对象。

   location 对象的用处不只表现在它保存着当前文档的信息,还表现在它将 URL 解析为独立的片段,让开发人员可以通过不同的属性访问这些片段。

   location 对象可以用来,查询字符串参数 和来改变浏览器的位置。

   replace()方法,这个方法 只接受一个参数,即要导航到的 URL,但不会在历史记录中生成新记录。在调用 replace()方法之后,用户不能回到前一个页面。

   reload(),作用是重新加载当前显示的页面,好将 reload()放在代码的后一行。

三、navigator 对象 

     navigator 对象提供了与浏览器有关的信息。到底提供哪些信息,很大程度上取决于用户的浏览器。

     navigator 对象的属性通常用于检测显示网页的浏览器类型,还可用作检测插件,注册处理程序 。

四、screen 和 history对象

    screen 对象基本上只用来表明客户端的能力,其中包括浏览器窗口外部的显示器的信息,如像素宽度和高度等。每个浏览器中的 screen 对象都包含着各不相同的属性。

    history 对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。

    虽然 history 并不常用,但在创建自定义的“后退”和“前进”按钮,以及检测当前页面是不是用户历史记录中的第一个页面时,还是必须使用它。 

学习第四天(2019-11-17)

标签:cat   处理   typeof   禁用   注册   高度   实现   其他   外部   

原文地址:https://www.cnblogs.com/xiaoxb17/p/11878573.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!