JavaScript之BOM操作
一, 什么是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操作的更多相关文章
- javaScript之BOM操作1
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javaScript之BOM操作2
<!doctype html> <html lang="en"> <head> <title>Document</title& ...
- Javascript学习--BOM操作
1 获取UA(user Agent)用户代理 <!DOCtype html> <html> <head> <title></title> & ...
- JavaScript 中BOM的常用操作
JavaScript BOM操作 1.获取浏览器窗口尺寸 var width=window,innerWidth //获取可视窗口宽度 var height=window.innerHeight // ...
- 前端javascript之BOM、DOM操作、事件
BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>>>:使用js操作前端页面 window对象 所有浏览器都支持 wind ...
- JavaScript的BOM、DOM操作、节点以及表格(二)
BOM操作 一.什么是BOM BOM(Browser Object Model)即浏览器对象模型. BOM提供了独立于内容 而与浏览器窗口进行交互的对象: BOM由一系列相关的对象构成 ...
- 第一百一十一节,JavaScript,BOM浏览器对象模型
JavaScript,BOM浏览器对象模型 学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...
- JavaScript DOM&BOM
1.DOM含义 D: Document 文档 一份文档就是一棵节点树,每个节点都是一个对象O:Object 对象 JavaScript语言里对象可以分为三种类型: (1)用户定义的对象(user-de ...
- JavaScript的BOM和DOM
JavaScript的BOM和DOM 1,window对象,所有浏览器都支持window对象,它表示浏览器窗口 BOM(browser Object Model)是指浏览器对象模型,它使JavaScr ...
随机推荐
- ubuntu16.04 开启FTP服务
配置ftp 1.安装 vsftpd服务器 sudo apt install vsftpd 2.创建一个ftp文件夹 (可以跳过) sudo mkdir /home/ftp 3.新建ftp用户,并指向它 ...
- 主席树(静态区间第k大)
前言 如果要求一些数中的第k大值,怎么做? 可以先就这些数离散化,用线段树记录每个数字出现了多少次. ... 那么考虑用类似的方法来求静态区间第k大. 原理 假设现在要有一些数 我们可以对于每个数都建 ...
- 微信小程序-坑1-await-async
VM45:1 thirdScriptError sdk uncaught third Error regeneratorRuntime is not defined ReferenceError: r ...
- linux运维、架构之路-全网备份项目方案
一.项目需求说明 某公司有多台服务器,里面的数据很重要,如果磁盘坏了,数据就会丢失,所以公司要求把重要服务器数据备份以便出现问题时可以进行恢复,要求:每天晚上00点整在所有服务器上打包备份系统配置文件 ...
- 安装VS2017
www.visualstudio.com/zh-hans/downloads/ https://visualstudio.microsoft.com/zh-hans/thank-you-downloa ...
- A标签跳转链接并修改样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- APK文件结构和安装过程
APK文件结构Android应用是用Java编写的,利用Android SDK编译代码,并且把所有的数据和资源文件打包成一个APK (Android Package)文件,这是一个后缀名为.apk的压 ...
- 网络流小记(EK&dinic&当前弧优化&费用流)
欢 迎 来 到 网 络 瘤 的 世 界 什么是网络流? 现在我们有一座水库,周围有n个村庄,每个村庄都需要水,所以会修水管(每个水管都有一定的容量,流过的水量不能超过容量).最终水一定会流向唯一一个废 ...
- Log4net记录日志到本地或数据库
OperatorLog /****** Object: Table [dbo].[OperatorLog] Script Date: SET ANSI_NULLS ON GO SET QUOTED_I ...
- 基于Skyline的web开发(6.x)
多窗口对比 一个页面加载多个TerraExplorer3DWindow和SGWorld等只有第一个能用(即使用iframe也是一样) 所以我决定打开两个新页面实现多窗口对比,然后我在<主页面&g ...