js-BOM

发布时间 2023-04-20 09:28:08作者: 挖洞404

1、介绍

BOM,browser object model浏览器对象模型,虽然没有正式标准,但几乎所有浏览器都实现了与js的交互,且方法和属性相同。

window对象表示浏览器,所有js全局对象、函数以及变量自动成为window对象的成员。

window直接调用的全局变量和方法可以直接使用属性和方法,而不需要window调用。

2、window.screen对象

包含有关用户设备屏幕的信息。

(1)availWidth属性

可用的屏幕宽度,单位像素

(2)availHeight属性

可用的屏幕高度,单位像素

(3)width属性

总宽度,单位像素,一般与availWidth一致

(4)height属性

总高度,单位像素,一般比availHeight略大,包括了下方的任务栏

(5)colorDepth

色彩深度

(6)pixelDepth

色彩分辨率

3、window.history对象

只有三个方法,实现前进后退。

history.back() 后退,与点击后退按钮效果相同
history.forward() 前进,与点击前进按钮效果相同
history.go(int) 为0表示刷新页面,为正数表示前进n,为负数表示后退n.

4、window.navigator

包含有关访问者浏览器的信息。

navigator.appCodeName 浏览器代号
navigator.appName 浏览器名称
navigator.appVersion 浏览器版本
navigator.cookieEnabled 启用cookie
navigator.platform 硬件平台,示例:win10
navigator.userAgent 用户代理
navigator.language 用户代理语言

 

5、console

控制台输出

window.console.log('text')

6、方法

(1)alert

警告框经常用于确保用户可以得到某些信息。

当警告框出现后,用户需要点击确定按钮才能继续进行操作。

alert("text")

(2)confirm

确认框通常用于验证是否接受用户操作。

当确认框弹出时,用户可以点击 “确认” 或者 “取消” 来确定用户操作。

当你点击 “确认”, 确认框返回 true, 如果点击 “取消”, 确认框返回 false。

var r=confirm("text")
if(r==true){}else{}

(3)prompt

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!="")
{}

(4)setInterval

间隔指定的毫秒数不停地执行指定的代码。

setInterval(function(){alert("Hello")},3000);
  • 参数1是一个函数,参数2是时间,单位毫秒

(5)clearInterval

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

要使用该方法,必须将setInterval方法创建为全局变量,然后才能作为clearInterval方法的参数

var myVar = setInterval(..., ...);
...
function xx(){clearInterval(myVar)}

(5)setTimeout和clearTimeout

在指定的毫秒数后执行指定代码。

setTimeout和clearTimeout,与setInterval和clearInterval使用方法一致

(6)其他方法

  • window.open() – 打开新窗口
  • window.close() – 关闭当前窗口
  • window.moveTo() – 移动当前窗口
  • window.resizeTo() – 调整当前窗口的尺寸

7、浏览器窗口的尺寸

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

  • window.innerHeight – 浏览器窗口的内部高度(包括滚动条)
  • window.innerWidth – 浏览器窗口的内部宽度(包括滚动条)

对于 Internet Explorer 8、7、6、5:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

或者

  • document.body.clientHeight
  • document.body.clientWidth
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
 
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;