专栏首页灵儿的笔记BOM,浏览器对象模型

BOM,浏览器对象模型

一、BOM

浏览器对象模型

BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能。BOM缺少规范,每个浏览器提供商又按照自己想法去扩展它,那么浏览器共有对象就成了事实的标准。所以,BOM本身是没有标准的或者还没有哪个组织去标准它。

1.window对象:

BOM的核心对象是window,它表示浏览器的一个实例,在浏览器中window对象有双重角色既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。

window对象处于JavaScript结构的最顶层,对于每个打开的窗口,系统都会自动为其定义 window 对象。

window结构:

window

|

document frames history location navigator screen

window对象有一系列的属性,这些属性本身也是对象。详见w3school的文档。

window下的属性和方法,可以使用window.属性、window.方法()或者直接属性、方法()的方式调用。例如:window.alert()和alert()是一个意思。

1.系统对话框:

alert(),confirm(),prompt()方法可以调用系统对话框向用户显示消息。显示这些对话框的时候代码会停止执行,关掉这些对话框后代码又会恢复执行。

alert()

该方法接受一个字符串并将其显示给用户。该对话框会包含指定的文本和一个"OK"按钮。主要用来显示警告信息

confirm()

确认对话框,显示包含指定的文本和一个"OK"按钮以及"Cancel"按钮。该方法返回布尔值,true表示单击了OK,false表示单击了cancel或者X按钮

if(confirm("确定吗??")){
alert("好!");
}else{
alert("切!");
}
prompt() 

会话框,提示用户输入一些文本。显示包含文本,ok按钮,cancel按钮以及一个文本输入域,以供用户在其中输入内容。传入两个参数,要显示给用户的文本提示和文本输入域的默认值。

如果用户单击OK按钮,该方法返回输入域的值,如果用户单击了Cancel或者关闭对话框该方法返回null.

2、导航和打开窗口

window.open()

使用window.open()方法可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。它可以接受四个参数:

参数:

1)要加载的URL

2)窗口目标,框架名

特殊名:

_self 当前浏览器页面

_parent 当前页面父页面

_top 当前页面顶级页面

_blank 新页面

framename 在指定的frame中打开

windowname 指定名字的页面中打开

3) 一个特定字符串

是用逗号分隔的设置字符串

fullscreen=yes|no|1|0 浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window,仅限IE浏览器

width=pixels 窗口的宽度.最小.值为100

height=pixels 窗口的高度。最小.值为100

left=pixels 该窗口的左侧位置

location=yes|no|1|0 是否显示地址字段.默认值是yes

menubar=yes|no|1|0 是否显示菜单栏.默认值是yes

resizable=yes|no|1|0 是否可调整窗口大小.默认值是yes

scrollbars=yes|no|1|0 是否显示滚动条.默认值是yes

status=yes|no|1|0 是否要添加一个状态栏.默认值是yes

titlebar=yes|no|1|0 是否显示标题栏.被忽略,除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes

toolbar=yes|no|1|0 是否显示浏览器工具栏.默认值是yes

top=pixels 窗口顶部的位置.仅限IE浏览器

4)表示新页面是否取代浏览器历史记录中当前加载页面的布尔值

如果传递了第二个参数,而且该参数是已有窗口或框架的名称,就会在具有该名称的窗口或框架中加载第一个参数指定的URL。

如果给window.open传递的第二个参数并不是一个已经存在的窗口或框架,那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或新标签页

open('http://www.baidu.com'); //新建页面并打开百度
open('http://www.baidu.com','baidu'); //新建页面并命名窗口并打开百度
open('http://www.baidu.com','_parent'); //在本页窗口打开百度,_blank是新建
open('http://www.baidu.com','baidu','width=400,height=400,top=200,left=200,toolbar=yes');

调整窗口大小

        //调整到100*100
      resizeTo(100,100);//接受浏览器窗口的新高度和新宽度
      //调整到200*150
      resizeBy(100,50); //接受新窗口与原窗口的宽度和高度之差

移动窗体

多用于新建窗体

      window.moveTo(0,0); 接受的是新位置的x和y坐标值
      window.moveBy(0,100);接受的是在水平和垂直方向上移动的像素值。

滚动条

      scrollBy(xnum,ynum) 方法可把内容滚动指定的像素数。注意: 要使此方法工作 window 滚动条的可见属性必须设置为true!
      scrollTo(xpos,ypos) 方法可把内容滚动到指定的坐标。

例如:

创建新窗体

   var w = window.open("http://www.baidu.com","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400");

改变窗体大小

w.resizeTo(400,200);

3.窗口位置

screenLeft和screenTop属性返回窗口相对于屏幕的X和Y坐标。(火狐浏览器不支持)

screenX和screenY属性返回窗口相对于屏幕的X和Y坐标。(ie8及以下浏览器不支持)

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。

pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

IE8及更早IE版本不支持该属性,但可以使用 "document.body.scrollLeft" 和 "document.body.scrollTop" 属性 。

//跨浏览器的方法
var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX;
var topY = (typeof screenTop == 'number') ? screenTop : screenY;

4.窗口大小

innerWidth 页面视图区的宽度

innerHeight 页面视图区的高度

outerWidth 浏览器窗口的宽度

outerHeight 浏览器窗口的高度

所有主流浏览器都支持innerWidth,innerHeight,outerWidth,outerHeight 属性。注意:IE8及更早IE版本不支持这些属性。

5. screen对象(详见w3c的js screen对象)

屏幕总宽度/高度:

screen.width

screen.height

可用宽度/高度:

screen.availWidth

screen.availHeight

颜色深度:

screen.colorDepth

颜色分辨率:

screen.pixelDepth

6.间歇调用和超时调用

JavaScript是单线程语言,但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。前者在指定的时间过后执行代码,而后者则是每隔指定的时间就执行一次代码。

超时调用需要使用window对象的setTimeout()方法,它接受两个参数:要执行的代码和毫秒数的超时时间。

1) setTimeout();

该方法返回一个数值ID,表示超时调用,这个超时调用ID是计划执行代码的唯一标识符通过它来取消超时调用。可以通过clearTimeout(ID);

参数:

1.要执行的代码

2.以毫秒表示的时间。

例如:

一秒后调用

var id = setTimeout(function(){
alert(1000);
},1000);
console.log(id);
//清除
clearTimeout(id);

2) setInterval();

按照指定的时间间隔重复执行代码,直到间歇调用被取消或页面被卸载。调用该方法也会返回一个间歇调用ID,该ID可以用户在将来某个时刻取消间歇调用

参数:

1.要执行的代码

2.以毫秒表示的时间。

clearInterval(ID); //取消间歇调用

3) 使用超时调用来模拟间歇调用

var num = 0;
var max = 10;
function incrementNum(){
num ++;
if(num < max){
alert(num);
setTimeout(incrementNum,500);
}else{
alert("Done"+num);
}
}
setTimeout(incrementNum,500);

一般认为,使用超时调用来模拟间歇调用是一种最佳模式。在开发环境下,很少使用真正的间歇调用,因为需要根据情况来取消ID,并且可能造成同步的一些问题,我们建议不使用间歇调用,而去使用超时调用。

note:

在使用超时调用时,没必要跟踪超时调用ID,因为每次执行代码之后,如果不再设置另一次超时调用,调用就会自行停止。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【教程】谷歌浏览器移到其他盘之后,本地网页代码无法用谷歌浏览器打开的解决办法

    但是,将默认安装在C盘的谷歌浏览器移到其他盘之后,好多默认的设置就失效了,怎么办呢

    小小鱼儿小小林
  • javascript简介,什么是 JavaScript?,JS的特征,开发环境

    当 Netscape Navigator 崭露头角时,Nombas 开发了一个可以嵌入网页中的 CEnvi 的版本。这些早期的试验被称为 Espresso Pa...

    小小鱼儿小小林
  • 什么是内存溢出(Out Of Memory---OOM)和内存泄露 (Memory Leak)

    系统已经不能再分配出你所需要的空间,比如系统现在只有1G的空间,但是你偏偏要2个G空间,这就叫内存溢出 例子:一个盘子用尽各种方法只能装4个果子,你装了...

    小小鱼儿小小林
  • Python+selenium 自动化高级应用篇:借助pyautogui实现web前端带轨迹拖拽功能,解决ActionChains拖拽失效问题

    有一些 web 前端的交互,必须有鼠标轨迹才能成功的实现拖拽功能。 而 selenium 自带的 ActionChains 方法,是一瞬间从 A 点到 B 点...

    小蓝枣
  • 腾讯出海有新招,要用退税帮你省下「几个亿」

    知晓君
  • Protocol(协议)

    用户1941540
  • ciscn2019华东南赛区web4题解

    看着url不像是PHP,因为我好像极少见过PHP用这种路由,直接冒一波险猜他是flask。使用local_file:///etc/passwd读取。

    KevinBruce
  • 从源码层面看一款精致的病毒软件应具备哪些特质

    说起来也比较久了,故事起源于去年11月份,我在公司办公环境搭建了一个dvwa的靶场环境,用于web漏洞的测试,不经意的发现access log日志增长迅速,查看...

    FB客服
  • 电解电容为什么会爆炸?一文看明白!

    电解电容是通过电解质作用在电极上形成的氧化层作为绝缘层的电容,通常具有较大的容量。电解质是液体、胶冻状富含离子的物质,大多数电解电容都是有极性的,也就是在工作时...

    MCU起航
  • 手写了一个RPC框架

    当开发一个单体项目的时候,大家肯定都写过类似的代码。即服务提供方和服务调用方在一个服务中

    Java识堂

扫码关注云+社区

领取腾讯云代金券