JS之BOM

JS语言是BS开发中负责页面动态效果的一种脚本语言,既然如此,自然少不了有关浏览器页面的知识,BOM:浏览器对象模型,涉及到有关JS中操作浏览器页面的一些基本知识。在这里最核心的对象就是window,它包含六大属性,其中这些属性本身也是对象。

通过图中,可以看出来,在window中我们最常用的就是window中的document对象即DOM(后面单独总结)。这里仅简单的总结一下有关window对象中的相关方法和使用。

一、系统对话框

此方法主要用于与用户交互,起到一个提示用户的作用。在BOM弹出窗口中,主要涉及到三个:

alert():相当于vb中的msgbox()的最简单形式,被经常用于JS中进行测试。

prompt():输入提示框,类似于inputbox

confirm():确定和取消,msgbox也可以实现此功能

二、位置和大小

主要指获取窗口的一个大小和位置。此处需要与DOM中的元素的位置和大小进行区分。

1、大小 :用来获取浏览器窗口大小

非IE:

innerWidth/Height:不包括菜单栏,工具栏和边框的大小,只是页面显示部分的大小。

outerWidth/Height:整个窗口的当前的尺寸,包括菜单栏、工具栏和边框。

IE:可利用clientWidth/Height来获取元素的实际大小,这里和DOM中获取元素的大小有很多关联的地方,后面总结。

2、位置:获取浏览器当前位置,距离左边和顶端的距离。

非IE:screenLeft/Top

IE:screenX/Y

这些是最基本的获取窗口的位置和大小的表示,可以和DOM中获取元素尺寸和位置来进行区分比较。通常会在设置元素居中显示时用到,在使用时,要涉及到各个浏览器的兼容问题,另外还可利用moveTo(,),moveBy(,)resizeTo(,) resizeBy()对元素进行移动等。

三、常用方法

JS是单线程语言,不支持多线程,因此,它提供了两种方法专门儿用于延迟加载和间歇调用

1、超时调用

setTimeout(执行的方法,延迟的时间) //含有括号中的两个参数

哪里可以用得到呢?

实战:JS中的粘贴(paste)触发事件发生在粘贴到目标区域之前,那么如果想要在粘贴事件之后触发想要执行的方法,此时,我们就可以用到延迟加载来实现此功能。

		var box=function(){setTimeout(alert('粘贴成功!'), 50)}; //默认单位毫秒,事件绑定代码略

此方法默认返回一个ID值,JS还提供了 clearTimeout()方法可用于取消超市调用,使用时,只需将需要取消方法的ID(返回值)赋给clearTimeout作为参数即可。

 clearTimeout(box);

2、间歇调用

setInterval(执行的方法,间歇时间),用法同上,同时可利用clearInterval()来取消间歇调用。

3、操作父窗口

在使用浏览器时,会经常遇到在弹出子窗口中去触发父窗口的情况,JS中open()方法用来打开一个新的子窗口,同时,默认父窗口的标识为opener,可在子窗口中添加事件,来触发父窗口相应。

document.onclick = function () {
    opener.document.write('子窗口让我输出的!');
}

总结:以上是有关window对象中最常用到的一些基础,在学习这一部分时,要避免与DOM中的一些知识混淆比如获取元素尺寸和大小等。因为二者很多属性是可以共用的。比如:location可以获取当前URL,具有导航功能,可以进行页面跳转,此为BOM中的其它对象在平常我们使用浏览器时便常常用到,比如history对象用来查看历史信息等。

时间: 2024-11-09 14:31:09

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的欠缺.虽然看了不少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