一, 什么是BOM

BOM:Browser Object Model,浏览器对象模型

BOM的结构图:

从上图也可以看出:

  • window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象。
  • DOM是BOM的一部分。

window对象:

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

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

弹出系统对话框:

比如说,alert(1)window.alert(1)的简写,因为它是window的子方法。系统对话框有三种:

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

打开窗口、关闭窗口:

打开窗口:

window.open(url,target)

//url:要打开的地址。
//target:新窗口的位置。可以是:_blank 、_self、 _parent 父框架。

关闭窗口:

window.close() - 关闭当前窗口 (只能关闭用js的window.open()打开的页面)

获取窗口宽高:

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

定时器:

在js中的定时器分两种:1. setTimeout() 2. setInterval()

setTimeOut():

只在指定时间后执行一次

/定时器 异步运行
function hello(){
alert("hello");
}
//使用方法名字执行方法
var t1 = window.setTimeout(hello,1000);
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
window.clearTimeout(t1);//去掉定时器

setInterval():

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

/实时刷新  时间单位为毫秒
var t = setInterval('refreshQuery()',8000);
/*刷新查询 */
function refreshQuery(){
console.log('每8秒调一次')
}
window.clearInterval(t);//去掉定时器

两种方法根据不同的场景和业务需求择而取之,

对于这两个方法,需要注意的是如果要求在每隔一个固定的时间间隔后就精确地执行某动作,那么最好使用setInterval,而如果不想由于连续调用产生互相干扰的问题,尤其是每次函数的调用需要繁重的计算以及很长的处理时间,那么最好使用setTimeout

location对象:

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

location对象的属性

  • href:跳转
  • hash 返回url中 # 后面的内容,包含#
  • host 主机名,包括端口
  • hostname 主机名
  • pathname url中的路径部分
  • protocol 协议 一般是http、https
  • search 查询字符串

location.href属性举例

举例1:点击盒子时,进行跳转

<body>
<div>百度一下</div>
<script>
var div = document.getElementsByTagName("div")[0]; div.onclick = function () {
location.href = "http://www.baidu.com"; //点击div时,跳转到指定链接
// window.open("http://www.baidu.com","_blank");
//方式二
}
</script>
</body>

举例2:5秒后自动跳转到百度

有时候,当访问一个不存在的网页时,会提示5秒后自动跳转到指定页面,此时就可以用到location。举例:

<script>
setTimeout(function () {
location.href = "http://www.baidu.com";
}, 5000);
</script>

location.reload():重新加载

setTimeout(function(){
//3秒之后让网页整个刷新
window.location.reload();
},3000)

navigator对象

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

  • userAgent:系统,浏览器
  • platform:浏览器支持的系统,win/mac/linux

例子:

console.log(navigator.userAgent);
console.log(navigator.platform);

history对象

后退:

history.back()
history.go(-1):0是刷新

前进:

history.forward()
history.go(1)

screen对象

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

JavaScript之BOM操作的更多相关文章

  1. javaScript之BOM操作1

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. javaScript之BOM操作2

    <!doctype html> <html lang="en"> <head> <title>Document</title& ...

  3. Javascript学习--BOM操作

    1 获取UA(user Agent)用户代理 <!DOCtype html> <html> <head> <title></title> & ...

  4. JavaScript 中BOM的常用操作

    JavaScript BOM操作 1.获取浏览器窗口尺寸 var width=window,innerWidth //获取可视窗口宽度 var height=window.innerHeight // ...

  5. 前端javascript之BOM、DOM操作、事件

    BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>>>:使用js操作前端页面 window对象 所有浏览器都支持 wind ...

  6. JavaScript的BOM、DOM操作、节点以及表格(二)

    BOM操作 一.什么是BOM BOM(Browser Object Model)即浏览器对象模型.     BOM提供了独立于内容 而与浏览器窗口进行交互的对象:     BOM由一系列相关的对象构成 ...

  7. 第一百一十一节,JavaScript,BOM浏览器对象模型

    JavaScript,BOM浏览器对象模型 学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...

  8. JavaScript DOM&BOM

    1.DOM含义 D: Document 文档 一份文档就是一棵节点树,每个节点都是一个对象O:Object 对象 JavaScript语言里对象可以分为三种类型: (1)用户定义的对象(user-de ...

  9. JavaScript的BOM和DOM

    JavaScript的BOM和DOM 1,window对象,所有浏览器都支持window对象,它表示浏览器窗口 BOM(browser Object Model)是指浏览器对象模型,它使JavaScr ...

随机推荐

  1. DevExpress v18.2版本亮点——Analytics Dashboard篇(二)

    行业领先的.NET界面控件——DevExpress v18.2版本亮点详解,本文将介绍了DevExpress Analytics Dashboard v18.2 的版本亮点,新版30天免费试用!点击下 ...

  2. 使用RAP2模拟假数据实现前后端分离

    一.为什么使用RAP2 在一个项目的开发中,在页面需要使用大量数据进行渲染生成前,后端开发人员的接口可能还没有写完, 当前端没有后端数据支持的情况下,我们使用mock.js(mock.js用于生成随机 ...

  3. LOJ2320「清华集训 2017」生成树计数

    由于菜鸡的我实在是没学会上升幂下降幂那一套理论,这里用的是完全普通多项式的做法. 要是有大佬愿意给我讲讲上升幂下降幂那一套东西,不胜感激orz! 首先可以想到prufer序列,如果不会的话可以左转百度 ...

  4. eclipse安装心得和环境变量配置的体会

    从昨天开始就开始安装eclipse,一开始觉得安装eclipse很简单,肯定就跟下个游戏差不多,但是打开官网之后发现下载的安装包不能用,经过搜索之后发现是因为下载源不对.改过下载源之后下载的安装包竟然 ...

  5. 在 centos7.5 使用 DockerFile 构建镜像时报错 "Error parsing reference:"microsoft/dotnet:2.2-aspnetcore-runtime AS base"is not a valid repository/tag: invalid reference format"

    运行 dockerfile 时报出的错误 FROM microsoft/dotnet:2.2-aspnetcore-runtime AS base Error parsing reference: & ...

  6. RabbitMQ消息如何100%投递成功(六)

    消息如何保障100%的投递成功? 什么是生产端的可靠性投递? 保障消息的成功发出 保障MQ节点的成功接收 发送端收到MQ节点(Broker)确认应答 完善的消息进行补偿机制(如网络问题没有返回确认应答 ...

  7. 音频学习(一)-离线播放(AVAudioPlayer)

    最后更新:2017-05-23 方法 - (nullable instancetype)initWithContentsOfURL:(NSURL *)url error:(NSError **)out ...

  8. equals深入理解

    package cn.galc.test; public class TestEquals { public static void main(String[] args) { /** * 这里使用构 ...

  9. GMM demo

    # GMM model # // library(mvtnorm) ) n1 = n2 = mu1 = c(,) mu2 = c(-,-) sigma1 = matrix(c(,.,.,),nrow= ...

  10. 职位-CIO:CIO

    ylbtech-职位-CIO:CIO 首席信息官(又称CIO,是Chief Information Officer的缩写)中文意思是首席信息官或信息主管,是负责一个公司信息技术和系统所有领域的高级官员 ...