时间戳

首页 > 技术文章 > javascript bom操作

javascript bom操作

Hybb 2019-10-28 16:29 原文

BOM

BOM介绍

全称 Browser Object Mode 浏览器对象模式

操作浏览器的API接口。比如浏览器自动滚动

img

  • Windows对象的顶层部分是BOM的顶层（核心）对象，所有的对象都是通过它延申出来的，也可以称为windowns的子对象。

  • DOM是BOM的一部分

windows对象：

  • windows对象是JavaScript中的顶级对象
  • 全局变量/自定义函数也是windows对象的属性和方法
  • window对象下的属性和方法调用时，可以省略window

BOM的常见内置方法和内置对象

window对象

弹出系统对话框

比如说，alert(1)是window.alert(1)的简写，因为他是window的子方法。系统对话框有下面三种方法：

alert();    //不同浏览器中的外观是不一样的
confirm();  //兼容不好
prompt();   //不推荐使用

打开窗口 关闭窗口

1. 打开窗口
window.open('http://www.baidu.com','_block')

// url: 要打开的地址
// target：新窗口的位置  可以是：_block  _self  _parent  父框架
2.关闭窗口
window.close(); // 关闭当前打开的页面

获取窗口的宽高

window.innerHeight;   // 获取浏览器的内部高度
388
window.innerWidth;    // 获取浏览器的内部宽度
1536
// 提示： 随着窗口的缩小，所以获取到的宽度和高度也会发生变化

Location对象

window.location可以简写为location。location相当于浏览器地址栏，可以将url解析为独立的片段

location对象的属性

  • href：操作地址栏里的url 进行跳转
  • host：主机名，包括端口
  • hash：返回url#号后面的内容 包含#
  • hostname：主机名
  • pathname：url中的路径部分
  • protocol：协议 一般http或者https
  • search：查询字符串

window.navigator 的一些属性可以获取客户端的一些信息。

  • useragent：系统，浏览器
  • platform：浏览器支持的系统 win mac
console.log(navigator.userAgent);
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36

console.log(navigator.platform);
Win32

history对象

返回和前进的操作

// 返回上一次
history.back();
history.go(-1) // 0表示刷新当前页面

// 前进一次
history.forward();
history.go(1)

screen对象（了解即可）

屏幕对象，不常用。

screen.availWidth // 可用的屏幕宽度
screen.availHeight // 可用的屏幕高度

定时器

在js的定时器中分为两种：setTimeout() 和 setInterval()

setTimeout()

只在指定时间后执行一次

// setTimeout(函数,时间)
var t1 = setTimeout(fn,4000);
var t2 = setTimeout(fn,1000);
var t3 = setTimeout(fn,1000);
function fn(){
    alert('hello world;')
}
console.log(t1)

clearTimeout(t2); // 去除定时器
clearTimeout(t3);

setIntervar()

在指定时间内周期循环执行

var t = setInterval(fn,1000);
function fn(){
    console.log('hello')
}
clearTimeout(t)

推荐阅读