JS学习专辑(2) BOM

  上次说了一些最基础的JS的对象,类型呀等基础的东西。如果在浏览器中来用JS的话,还是应该先学习一下BOM(浏览器对象模型)。它提供了独立于内容而与浏览器窗口进行交互的对象。下面是一个BOM的体系结构。

  

  可以看到window是整个BOM的核心。表示整个阅览器窗口。全局变量全局函数都是window的属性和方法。

  在窗口的操作中,可以用window.innerHeight和window.innerWidth来确定浏览器的尺寸,还可以通过window.moveBy()、window.moveTo()、window.resizeBy()、window.resizeTo()来调整窗口的大小和位置。我试验了一下resize来调整窗口大小,可以发现不同的浏览器的调整大小是不同的,详情可参考这个。当需要打开新的窗口时,需要用到window.open(url,name, features, replace)。这里第一第二个参数就像字面意思一样,第三个参数是当打开新载入页面替换当前页面的boolean值,最后一个只有当这个方法调用却打不开时才有用。

  还有一些window的特性的常见的操作:比如弹出不同的系统对话框啦(alert(),confirm(),prompt()),状态栏,时间间隔和暂停。不过貌似后面两个不是很好用,所以了解一下就好。

  再看一看Frame框架,一个HTML有一个或者多个框架,用<iframe>来表示一个子框架。如果在一个框架集合中,需要引用一个子框架,就可以这样写:window.frames[index]、window.frames["framename"],这里的window可以用self来代替,使代码更容易阅读。如果是一个框架的集合,就可以用<frameset>然后设置rows或者cols来分割放置框架。用多个框架的话从父框架到子框架的引用window.frames["frameName"].frames["frameName2"]只要像这样继续往下找就好了。

  在浏览器中可以查看窗口的历史,这个是很简单的,只需要history.back();history.forward();history.go(int);就可以轻松达到前进和后退。

  然后是一个挺有用处的东西location,表示对象载入窗口的URL,此外还可以解析URL。比如location.herf="";和lacation.assign("");都是用于获取设置窗口的URL比较常用。还有很多属性,如hash,port,host,pathname等等。可以把URL给拆分出来。

  而navigator对象是用来判断浏览器页面采用的是撒浏览器,还有用的什么操作系统等等,这个东西貌似复杂,放后面看吧。screen就的话就和字面意思一样获取的是用户的屏幕信息,可以查看屏幕的高宽,颜色位数。也可以看窗口的高宽。

  最后再来看下document,因为这个是BOM和DOM都有的东西,所以放到后面来看,在BOM中,document包含了页面的通用的属性和集合。不过很多属性在CSS中是可以控制的(alinkColor,bgColor,fgColor,linkColor,vlinkColor),所以能用CSS就用CSS去控制这些东西呗。这个对象还有很多集合可以对页面的各个部分的访问包括了(anchors,applets,embeds,forms,images,links)。当然这个对象更重要的是在DOM中的应用。在接下来的学习再来看这个东西。

原文地址:https://www.cnblogs.com/socialdk/p/3007132.html