JS 之BOM

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 高级程序设计》

时间: 2024-11-29 13:39:20

JS 之BOM的相关文章

JavaScript基础16——js的BOM对象

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js的BOM对象</title> 6 <script type="text/javascript"> 7 // BOM:Broswer Object Model 浏览器对象模型 8 /* 9 navifator 获取客户端(浏览器)的信息 10

JS之BOM

JS语言是BS开发中负责页面动态效果的一种脚本语言,既然如此,自然少不了有关浏览器页面的知识,BOM:浏览器对象模型,涉及到有关JS中操作浏览器页面的一些基本知识.在这里最核心的对象就是window,它包含六大属性,其中这些属性本身也是对象. 通过图中,可以看出来,在window中我们最常用的就是window中的document对象即DOM(后面单独总结).这里仅简单的总结一下有关window对象中的相关方法和使用. 一.系统对话框 此方法主要用于与用户交互,起到一个提示用户的作用.在BOM弹出

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

背景:  最近在着手项目的时候,意识到自己JS的欠缺.虽然看了不少JavaScript的视频,但真正项目中并不是经常遇到大且难的例子.所以JavaScript的基础还需要再打扎实,也就有了这一系列博客.这一系列更重视实用,理论部分可参看之前博客. BOM(Browser Object Mode)浏览器对象模型,是Javascript的重要组成部分.它提供了一系列对象用于与浏览器窗口进行交互,这些对象通常统称为BOM. 由图中可看出,window对象是BOM中所有对象的父对象. 1.window对

js笔记--BOM编程

1.window对象 BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,window对象具有双重角色.它既是通过JS访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象.所以网页中定义的任何一个对象,变量和函数,都以window作为其Global对象. 1.全局作用域 所有在全局作用域中声明的变量,函数都会编程window对象的属性和方法.但是定义全局变量和直接在window对象上定义属性还是有区别的:全局变量不能通过delete操作符删除,但是直接在win

js 浏览器 BOM

js 浏览器 window 浏览器对象模型BOM使js有能力与浏览器对话.所有浏览器都支持window对象,它表示浏览器窗口.所有js全局变量,函数以及变量均自动成为window对象的成员. // 确定浏览器窗口的尺寸 <!DOCTYPE html> <html> <body> <p id="demo"></p> <script> var w=window.innerWidth || document.docume

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

1.Javascript组成 JavaScript的实现包括以下3个部分: 1)核心(ECMAScript):描述了JS的语法和基本对象. 2)文档对象模型 (DOM):处理网页内容的方法和接口 3)浏览器对象模型(BOM):与浏览器交互的方法和接口 ECMAScript扩展知识: ① ECMAScript是一个标准,JS只是它的一个实现,其他实现包括ActionScript. ② "ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力--",即ECMAScript不与具

js操作bom和dom

Bom 概念 BOM : Browser Object Model 浏览器对象模型,描述与浏览器进行交互的方法和接 口, ECMAscript是javascript的核心,但如果要在web中使用javascript,那么 BOM则无疑才是真正的核心. BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关. window对象 窗口高度 var  a  = window.innerheight 窗口宽度 var a = window.innerwidth 打开一个新的页面 open

百万年薪python之路 -- JS的BOM与DOM对象

BOM对象 location对象 location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面,就是刷新一下页面 定时器 1. setTimeOut() 一段时间之后执行某个内容,执行一次 示例 var a = setTimeout(function f1(){confirm("are you ok?");},3000); var a = setTimeout("co

js基础和js操作bom和dom对象

流程控制 if判断 if (a == 1){ //判断条件写在小括号里面,大括号里面写条件判断成功后的代码内容 console.log('1111'); } else{ console.log('222'); } 多条件判断 var a = 0; if(a > 1){ // console.log('1111'); // var hhhh = document.getElementById('d1'); // hhhh.innerText = '彭于晏'; }else if(a<1){ con

js的BOM对象完全解析

BOM即浏览器对象模型,它包括如下一些对象! (一)screen对象,Screen 对象中存放着有关显示浏览器屏幕的信息. 常见的属性有: availHeight:返回显示屏幕的高度 availWidth:返回显示屏幕的宽度 colorDepth:返回目标设备或缓冲器上的调色板的比特深度. height:返回屏幕区域的实际高度 width:返回屏幕区域的实际宽度 (二)Window对象,Window 对象表示一个浏览器窗口或一个框架. 常见方法: (1)窗口的打开与关闭: window.open