BOM的核心对象是window,表示浏览器的一个实例。

使用框架时,window.top对象指顶层框架,也就是浏览器窗口。window.parent对象指包含当前窗口的框架,也就是父框架。window.self指的是当前window窗口。

窗口位置

用来确定和修改window对象位置的属性。如下面代码:

var leftPos = (typeof window.screenLeft == 'number') ? window.screenLeft : window.screenX;

var topPos = (typeof window.screenTop == 'number') ? window.screenTop : window.screenY;

screeLeft/screenTop表示从屏幕左边或上边距离window对象所表示的页面的距离。(IE,chrome,Opera,Safari)

screenX/screenY表示浏览器窗口相对于屏幕的坐标。(适用火狐)

窗口大小

innerWidth,innerHeight,outerWidth,outerHeight:四个属性表示浏览器窗口的大小,Firefox,Chrome,Opera,Safari适用。

document.documentElement.clientWidth,document.documentElement.clientHeight或者document.body.clientWidth,document.body.clientHeight:保存页面的视口信息。

相关方法

window.open():新开窗口

window.setTimeout(funcName,1000):超时调用,只执行一次

window.clearTimeout(timeoutID):清除超时调用ID

window.setInterval(funcName,1000):间歇调用,每隔一段时间执行一次。

window.clearInterval(intervalId):清除间歇调用ID

使用超时调用来模拟间歇调用是一种最优的模式,原因是间歇调用可能会出现后一个间歇调用在前一个间歇调用未结束前就启动。

alert(),confirm(),prompt()调用系统对话框向用户显示信息

window.find()   //显示“查找”对话框

window.print()    //显示“打印”对话框

location对象

location对象即是window对象的属性,也是document对象的属性。提供了当前浏览器的导航信息。其中修改页面的url:

location.assign('http://www.baidu.com');

locaiton.href = 'http://www.baidu.com';

window.location = 'http://www.baidu.com';

以上方法都是立即打开新的URL并在浏览器的历史记录中生成一条新的记录,通过浏览器的后退按钮都能导航到前一个页面。

location.replace('http://www.baidu.com');  //replace方法接收一个参数,即要导航到的url,使用这个方法不会在浏览器中生成历史记录,无法通过后退按钮返回之前的页面。

location.reload();  //reload方法表示重新加载当前页面,不传参数表示可能从缓存中加载当前页面。

location.reload(true);    //强制从服务器端重新加载当前页面

navigator对象

navigator对象表示与浏览器相关的对象。比较常用的是navigator.userAgent属性监测浏览器的版本信息。

screen对象

screen对象表示浏览器窗口的外部显示器信息。这个对象比较少用。screen.availWidth,screen.availHeight指屏幕的像素宽高。

history对象

window对象中的history对象指用户的浏览器历史记录,虽然无法知道实际的url,但是有以下方法可以实现浏览器的前进后退功能。

history.go(-1)   //后退一页

history.go(1)    //前进一页

history.back()    //后退一页

history.forward()   //前进一页

history.go('baidu.com')    //跳转到历史记录中包含'baidu.com'字符串的链接的第一个位置,如果没有则什么都不做

history.length   指历史记录的个数。如果为0指当前页面是打开窗口的第一个页面

总结自:《javascript 高级程序设计》

JS 之BOM的更多相关文章

  1. JavaScript基础16——js的BOM对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. JS的BOM操作语法

    整理了一下JS的BOM操作语法,这里记录一下. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  3. js,bom,dom(相信我,你看不懂我写的)

    js dom bom 2种结合方式: 1.在body中加入script标签,<script type="text/javascript" >alert(" 向 ...

  4. JS之BOM、客户端检测和DOM

    这是第八章到第十二章的内容,粗略浏览过一遍. 一.BOM 浏览器对象模型.包括了window.location.navigator.screen和history对象. window:核心对象 1.JS ...

  5. js操作bom和dom

    Bom 概念 BOM : Browser Object Model 浏览器对象模型,描述与浏览器进行交互的方法和接 口, ECMAscript是javascript的核心,但如果要在web中使用jav ...

  6. js中BOM与DOM的概念与区别

    1.BOM 浏览器对象模型 提供了独立于内容而与浏览器窗口进行交互的对象.描述了与浏览器进行交互的方法和接口,可以对浏览器窗口进行访问和操作,譬如可以弹出新的窗口,改变状态栏中的文本,对Cookie的 ...

  7. js对象(BOM部分/DOM部分)

    JS总体包括ECMAScript,DOM,BOM三个部分,但是能够和浏览器进行交互的只有DOM和BOM,那么到底什么是DOM和BOM呢 概念 BOM(Browser Object Model)是指浏览 ...

  8. JS浏览器BOM

    浏览器对象模型 (BOM)  BOM的核心是window,而window对象又具有双重角色,它既是通过js访问浏览器窗口的一个接口,又是一个Global(全局)对象.这意味着在网页中定义的任何对象,变 ...

  9. JS之BOM和DOM(来源、方法、内容、应用)

    1.Javascript组成(此文为转载) JavaScript的实现包括以下3个部分: 1)核心(ECMAScript):描述了JS的语法和基本对象. 2)文档对象模型 (DOM):处理网页内容的方 ...

  10. 实用JS系列——BOM常用对象

    背景:  最近在着手项目的时候,意识到自己JS的欠缺.虽然看了不少JavaScript的视频,但真正项目中并不是经常遇到大且难的例子.所以JavaScript的基础还需要再打扎实,也就有了这一系列博客 ...

随机推荐

  1. C语言-08-预处理器

    C预处理器,C Preprocessor简称CPP.C预处理器不是编译器的一部分,它是一个单独的文本替换工具,指示编译器在实际编译之前需要完成的工作. 常用的预处理器指令 #include 包含头文件 ...

  2. 在Asp.net MVC中使用Authorization Manager (AzMan)进行Windows用户身份认证

    背景 创建需要通过Windows用户进行身份认证的Asp.net MVC应用 要点 在Asp.net MVC应用基于Windows用户进行身份认证的方法有很多,如MVC自带的Windows认证就经常被 ...

  3. linux下重启oracle服务:监听器和实例

    一.在Linux下重启Oracle数据库及监听器: 方法1: 用root以ssh登录到linux,打开终端输入以下命令: cd $ORACLE_HOME #进入到oracle的安装目录 dbstart ...

  4. 编译hadoop遇到maven timeout

      在编译hadoop的过程中,使用ant jar进行编译时,提示maven版本库连接超时的问题,通过搜索发现,在如下文件的位置中有repo2的版本库地址,这个地址在国内,目前不能正常的访问:   将 ...

  5. VS2010 单文档+多视图+Outlook风格

    先来个段子 十年生死两茫茫,喜羊羊,灰太狼.舒克贝塔,蓝猫话凄凉.纵使相逢应不识,圣斗士,美猴王.老夫聊发少年狂,治肾亏,不含糖.锦帽貂裘,千骑用康王.为报倾城随太守,三百年,九芝堂.夜来幽梦忽还乡, ...

  6. emacs24下使用jedi对python编程进行补全

    在开始前先装好pip和virtualenv(见pip的安装一文),另需安装好make 1.emacs下安装: epc deferred.el auto-complete 使用M-x package-i ...

  7. XSLT

    一.简介 XSLT 是一种用于将 XML 文档转换为 XHTML 文档或其他 XML 文档的语言. XSL(eXtensible Stylesheet Language) -- 可扩展标记语言,主要用 ...

  8. table边框美化

    在<table>里面加代码就可以了. 效果1: <TABLE style="BORDER-RIGHT: #993333 3px dashed; BORDER-TOP: #9 ...

  9. A class for global logging

    Some time we need to record the logging information in multiple module, however if we use the follow ...

  10. Can't initialize metastore for hive

    there maybe many reason to cause this,today our issue is that, if you execute hive –database dbname ...