JavaScript（六）

最新推荐文章于 2020-05-20 11:30:43 发布

原创最新推荐文章于 2020-05-20 11:30:43 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

JavaWeb 专栏收录该内容

48 篇文章

订阅专栏

本文深入解析浏览器对象模型(BOM)，包括window、location、screen、history和navigator对象的属性与方法，阐述了BOM在Web开发中的核心作用。

1.23 BOM简介

ECMAScript是JavaScript的核心，但如果要在Web使用JavaScript，那么BOM（浏览器对象模型）则无疑才是真正的核心。BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。
多年来，缺少事实上的规范导致BOM既有意思又有问题，因为浏览器提供商会按照各自的想法随意去扩展它。于是，浏览器之间共有的对象就成了事实上的标准。W3C为了把浏览器中JavaScript最基本的部分标准化，已经将BOM的主要方面纳入了HTML5的规范中。
BOM非常庞大，但是，初学者只需要使用BOM中不到10%的对象、属性和方法，本章介绍BOM中较常用的部分。
BOM对象的层级结构

1.24 window 对象
- BOM的核心对象是window，它表示浏览器的一个实例（即浏览器的窗口或框架）。Window对象是其他所有对象的顶级对象。
- 在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象的具体实现。网页中定义的任何一个对象、全局变量和函数都会成为window对象的子对象、属性、方法。
- 虽然全局变量会成为window对象的属性，但定义全局变量和在window对象上直接定义属性还是有区别：全局变量不能通过delete操作符删除，而直接在window对象上定义的属性则可以。
- window对象是一个全局对象，因此可以不使用其名称访问其属性和方法。

 如   alert(“Hello”);
        window.alert(“Hello”);
        window.defaultStatus=“状态栏信息”;
        defaultStatus=“状态栏信息”;

window对象的常用属性和方法：
在这里插入图片描述

☞ 窗口位置

 例题4-3.html
     screenLeft  screenTop  (IE、Safari、Opera、Chrome)
     screenX     screenY   （ Firfox、Safari、Chrome ）

跨浏览器操作方法：
在这里插入图片描述
☞ 窗口位置

  moveTo(x,y)   moveBy(水平,垂直)
   如  window.moveto(0,0);  //将窗口移动屏幕左上角
       window.moveBy(0,100); //将窗口向下移动100像素
       window.moveTo(200,300); 
       window.moveBy(-50,0);  //将窗口向左移动50像素

   *这两个方法在许多浏览器中被禁用！

☞ 窗口大小

  innerWidth  innerHeight   outerWidth  outerHeight (IE9+、Firefox、Safari、Opera、Chrome)

   resizeTo(x,y)   resizeBy(x,y)
   
   如   resizeTo(400,300);   //将窗口大小变为400*300
        resizeBy(100,50);  //水平增大100，垂直增大50
   *这两个方法也被很多浏览器禁用！

☞ 打开、关闭窗口

 open()     close()
   如：
     window.open("http://www.baidu.com",target="topFrame");
     window.open("http://www.baidu.com","百度","width=400,height=300,left=100,top=50,resizeable=1,toolbar=1,status=1,scrollbars=1,menubar=1");
     window.close();

☞ 延时调用和定时调用

setTimeout()    clearTimeout()

例题 4-6.html
在这里插入图片描述

setInterval()   clearInterval()

在这里插入图片描述
☞ 系统对话框

 alert()   confirm()   prompt()

例题 4-8.html

在这里插入图片描述
1.26 location对象

location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。Location对象是一个很特别的对象，它既是window对象的属性，也是document对象的属性。也就是说，window.location和document.location引用的是同一个对象。

location对象常用的属性和方法：

location对象的导航功能：

   window.location="http://www.baidu.com";
   location.href="http://www.baidu.com";
    location.assign("http://www.baidu.com");
    location.replace("http://www.baidu.com");

1.27 screen对象

screen对象在JavaScript中用处不大，主要用来反映用户当前的屏幕设置。
常用属性

例题4-9.html
在这里插入图片描述
1.28 history对象

history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。
常用属性和方法：

1.29 navigator 对象
- navigator对象包含有关浏览器的信息。虽然这个对象的名称显而易见的是 Netscape 的 Navigator 浏览器，但其他实现了 JavaScript 的浏览器也支持这个对象。
- 常用属性和方法
- 检测插件：检测浏览器是否安装了特点的插件是一项非常常见的检测例程。对于非IE浏览器，可以使用plugins数组来达到目的。而在IE中，检测插件的唯一方式就是使用专有的ActiveXObject类型，并尝试创建一个特定插件的实例。