什么是BOM?常见的BOM对象有哪些?
# 一、是什么
BOM
(Browser Object Model),浏览器对象模型,提供了独立于内容与浏览器窗口进行交互的对象
其作用就是跟浏览器做一些交互效果,比如如何进行页面的后退,前进,刷新,浏览器的窗口发生变化,滚动条的滚动,以及获取客户的一些信息如:浏览器品牌版本,屏幕分辨率
浏览器的全部内容可以看成DOM
,整个浏览器可以看成BOM
。区别如下:
# 二、window
Bom
的核心对象是window
,它表示浏览器的一个实例
在浏览器中,window
对象有双重角色,即是浏览器窗口的一个接口,又是全局对象
因此所有在全局作用域中声明的变量、函数都会变成window
对象的属性和方法
var name = 'js每日一题';
function lookName(){alert(this.name);
}console.log(window.name); //js每日一题
lookName(); //js每日一题
window.lookName(); //js每日一题
关于窗口控制方法如下:
moveBy(x,y)
:从当前位置水平移动窗体x个像素,垂直移动窗体y个像素,x为负数,将向左移动窗体,y为负数,将向上移动窗体moveTo(x,y)
:移动窗体左上角到相对于屏幕左上角的(x,y)点resizeBy(w,h)
:相对窗体当前的大小,宽度调整w个像素,高度调整h个像素。如果参数为负值,将缩小窗体,反之扩大窗体resizeTo(w,h)
:把窗体宽度调整为w个像素,高度调整为h个像素scrollTo(x,y)
:如果有滚动条,将横向滚动条移动到相对于窗体宽度为x个像素的位置,将纵向滚动条移动到相对于窗体高度为y个像素的位置scrollBy(x,y)
: 如果有滚动条,将横向滚动条向左移动x个像素,将纵向滚动条向下移动y个像素
window.open()
既可以导航到一个特定的url
,也可以打开一个新的浏览器窗口
如果 window.open()
传递了第二个参数,且该参数是已有窗口或者框架的名称,那么就会在目标窗口加载第一个参数指定的URL
window.open('htttp://www.vue3js.cn','topFrame')
==> < a href=" " target="topFrame"></ a>
window.open()
会返回新窗口的引用,也就是新窗口的 window
对象
const myWin = window.open('http://www.vue3js.cn','myWin')
window.close()
仅用于通过 window.open()
打开的窗口
新创建的 window
对象有一个 opener
属性,该属性指向打开他的原始窗口对象
# 三、location
url
地址如下:
http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q=javascript#contents
location
属性描述如下:
属性名 | 例子 | 说明 |
---|---|---|
hash | "#contents" | utl中#后面的字符,没有则返回空串 |
host | www.wrox.com:80 | 服务器名称和端口号 |
hostname | www.wrox.com | 域名,不带端口号 |
href | http://www.wrox.com:80/WileyCDA/?q=javascript#contents | 完整url |
pathname | "/WileyCDA/" | 服务器下面的文件路径 |
port | 80 | url的端口号,没有则为空 |
protocol | http: | 使用的协议 |
search | ?q=javascript | url的查询字符串,通常为?后面的内容 |
除了 hash
之外,只要修改location
的一个属性,就会导致页面重新加载新URL
location.reload()
,此方法可以重新刷新当前页面。这个方法会根据最有效的方式刷新页面,如果页面自上一次请求以来没有改变过,页面就会从浏览器缓存中重新加载
如果要强制从服务器中重新加载,传递一个参数true
即可
# 四、navigator
navigator
对象主要用来获取浏览器的属性,区分浏览器类型。属性较多,且兼容性比较复杂
下表列出了navigator
对象接口定义的属性和方法:
# 五、screen
保存的纯粹是客户端能力信息,也就是浏览器窗口外面的客户端显示器的信息,比如像素宽度和像素高度
# 六、history
history
对象主要用来操作浏览器URL
的历史记录,可以通过参数向前,向后,或者向指定URL
跳转
常用的属性如下:
history.go()
接收一个整数数字或者字符串参数:向最近的一个记录中包含指定字符串的页面跳转,
history.go('maixaofei.com')
当参数为整数数字的时候,正数表示向前跳转指定的页面,负数为向后跳转指定的页面
history.go(3) //向前跳转三个记录
history.go(-1) //向后跳转一个记录
history.forward()
:向前跳转一个页面history.back()
:向后跳转一个页面history.length
:获取历史记录数
什么是BOM?常见的BOM对象有哪些?相关推荐
- JavaScript学习笔记之BOM篇,认识几种常见的浏览器对象
BOM(Browser Object Document)即浏览器对象模型,顾名思义就是为了控制浏览器的行为而出现的接口.浏览器可以做什么呢?比如跳转到另一个页面.前进.后退等等,程序还可能需要获取屏幕 ...
- BOM函数之history对象
前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后 ...
- BOM模型中常用对象 定义计数器 网页跳转 网页前进后退
今天上午学了的BOM模型中常用对象,了解了一部分的属性 For循环的规律 外层循环控制行 内层循环控制列 <!doctype html> <html> <head> ...
- BOM,什么是BOM?
4.BOM 4.1 什么是BOM? BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window. BOM 由一系 ...
- PLM中的BOM定义和BOM知识介绍
BOM是企业信息化建设的管理核心,是任何管理系统中的基础,是贯穿各信息系统的主线,BOM管理是企业技术管理信息化的主要内容,许多企业对BOM的认识不够,有些企业甚至在选型中连BOM是何含义都不理解,所 ...
- 订单BOM与销售BOM的区别
订单BOM与销售BOM的区别 訂單BOM: 是實際生產時用的BOM, 在標準BOM和銷售BOM基礎上增減物料的BOM 銷售BOM: 是為特定客戶設定的BOM, 在主檔數據層次上的BOM, 在生產時是帶 ...
- oracle bom展开 sql,Oracle EBS-SQL (BOM-15):检查多层BOM(含common BOM).sql
select distinct b.lvl 层次, b.OPERATION_SEQ_NUM 工序, msi1.segment1 父件编码, msi1.description 父件描述, m ...
- 【解析】在高级语言源程序中, 常需要用户定义的标识符为程序中的对象命名,常见的命名对象有()
在高级语言源程序中, 常需要用户定义的标识符为程序中的对象命名,常见的命名对象有() A.关键字 B.变量 C.函数 D.数据类型 E.注释 一个一个分析: 关键字 :虽然很多关键字都可以用过defi ...
- Oracle EBS-SQL (BOM-19):主BOM与替代BOM互换.sql
替代BOM与主BOM互相转换 BOM: 1-01-27-211 子件:1-01-27-416 ID:2202 BOM替代项:替代0001 子件: 1-01-26-204 ID:2 ...
- SAP 订单BOM与销售BOM的区别
订单BOM与销售BOM的区别 訂單BOM: 是實際生產時用的BOM, 在標準BOM和銷售BOM基礎上增減物料的BOM 銷售BOM: 是為特定客戶設定的BOM, 在主檔數據層次上的BOM, 在生產時是帶 ...
最新文章
- kmeans聚类源代码
- 迁移 Spring Boot 到函数计算
- activemq nodejs stomp 重连机制_5分钟优劣分析 Kafka、RabbitMQ、RocketMQ、ActiveMQ消息队列...
- redis 获取所有的key_在微博微信场景下学习Redis数据结构
- oracle表分析效果怎么看,Oracle 索引与表分析几种方法
- Mask-Predict: Parallel Decoding of Conditional Masked Language Models
- JSK-27 三值排序【贪心】
- java 获取xml 版本号_java读取xml文件字段值
- 50 years, 50 colors HDU - 1498(最小点覆盖或者说最小顶点匹配)
- 计算机如何更改键盘设置在哪里设置,原神pc按键怎么改
- 论结果与过程的重要性
- Python爬虫系列之某了么h5签名sign算法
- win10查看电池详细使用情况报告(查看损耗等)以及无法启动服务问题
- mysql创建日历表,可以按日或按月增加数据
- modelsim-SE仿真error问题
- 文苑杂志文苑杂志社文苑编辑部2021年第7期目录
- 读书笔记:《权力之治:人工智能时代的算法规制》
- NOIP 2016 蚯蚓 题解
- 小米手机 工程机拆机 【大图哦】
- Word 模板渲染引擎-Poi-tl - 标签(二)
热门文章
- web网页设计期末课程大作业:红色中国文化主题网站设计——中国文化(6页) HTML+CSS+JavaScript HTML网页设计制作大作业 学生HTML文化网页作业作品
- mysql -%3e卡在_华为nova 3e手机卡怎么办?五个技巧帮你缓解手机卡顿烦恼!
- 日期推算 (函数、指针)
- 深度学习框架【CNTK】的安装
- 动态加速度信号的时频域积分方法
- Javascript数据类型及函数
- JS 异步编程终极解决方案 async/await 的使用手册
- 工作缺点和不足及措施_关于个人工作不足和改进措施的总结
- 经典算法 计算两个日期之间的天数
- Flutter Animations showModal 模态动画方式打开新的页面