博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
bom
阅读量:4350 次
发布时间:2019-06-07

本文共 3681 字,大约阅读时间需要 12 分钟。

一、定义

BOM(Browser Object Model) 即浏览器对象模型,主要是指一些浏览器内置对象如:

window   全局对象    具有双重角色:它既是ECMAscript规定的全局global对象,又是javascript访问浏览器窗口的一个接口、  

location   与地址栏内容相关、

navigator  浏览器相关的内容,通常判断浏览器类型都是通过这个对象、

screen   判断屏幕的高度宽度、

history  访问浏览器的历史记录,如前进、后台、跳转到指定位置

document   DOM是属于BOM的一个属性,

等对象,用于完成一些操作浏览器的特定API。

其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。  BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C。

二、详述

1.window

moveBy() 函数  moveTo() 函数   resizeBy() 函数    resizeTo() 函数   scrollTo() 函数   scrollBy() 函数    focus() 函数   blur() 函数open() 函数  close() 函数alert() 函数    confirm() 函数    prompt() 函数defaultStatus 属性     status 属性    opener 属性 setTimeout() 函数    clearTimeout() 函数     setInterval() 函数    clearInterval() 函数 常用场景 1.1获取窗口相对于屏幕左上角的位置

window.onresize = function() {

var leftPos = (typeof window.screenLeft === 'number') ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenLeft === 'number') ? window.screenTop : window. screenY;
document.write(leftPos+","+topPos);
console.log(leftPos+","+topPos);
}

1.2移动窗口,调整窗口大小

window.moveTo(0,0)window.moveBy(20,10)window.resizeTo(100,100);window.resizeBy(100,100);  注意,这几个方法在浏览器中很可能会被禁用。 1.3获得浏览器页面视口的大小
var pageWith=document.documentElement.clientWidth||document.body.clientWidth;var pageHeight=document.documentElement.clientHeight||document.body.clientHeight; 1.4导航和打开窗口 window.open()既可以导航到特定的URL,也可以打开一个新的浏览器窗口,其接收四个参数,要加载的url,窗口目标(可以是关键字_self,_parent,_top,_blank),一个特性字符串,以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。通常只需要传递第一个参数。 注意,在很多浏览器中,都是阻止弹出窗口的。 1.5定时器

setTimeout(code,millisec)

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
code 必需,要调用的函数后要执行的 JavaScript 代码串。
millisec 必需,在执行代码前需等待的毫秒数。
clearTimeout(对象) 清除已设置的setTimeout对象

1.6系统对话框

alert():带有一个确定按钮

confirm():带有一个确定和取消按钮

prompt():显示OK和Cancel按钮之外,还会显示一个文本输入域

1.7 scroll系列方法

scrollHeight和scrollWidth 对象内部的实际内容的高度/宽度(不包括border)

scrollTop和scrollLeft 被卷去部分的顶部/左侧 到 可视区域 顶部/左侧 的距离

onscroll事件 滚动条滚动触发的事件

2.document

write() 函数writeln() 函数document.open() 函数document.close() 函数 ...

3.location对象

location对象提供了当前窗口加载的文档的相关信息,还提供了一些导航功能。事实上,这是一个很特殊的对象,location既是window对象的属性,又是document对象的属性。

location.hash  #contents  返回url中的hash,如果不包含#后面的内容,则返回空字符串

location.host  best.cnblogs.com:80  返回服务器名称和端口号

location.port  80  返回端口号

location.hostname  best.cnblogs.com  返回服务器名称

location.href  http://best.cnblogs.com  返回当前加载页面的完整url

location.pathname  /index.html  返回url中的目录和文件名

location.protocol http  返回页面使用的协议

location.search  ?q=javascript  返回url中的查询字符串

改变浏览器的位置:location.href=http://www.baidu.com

如果使用location.replace('http://www.baidu.com'),不会在历史记录中生成新纪录,用户不能回到前一个页面。

location.reload():重置当前页面,可能从缓存,也可能从服务器;如果强制从服务器取得,传入true参数 

4.history对象

history对象保存着用户上网的历史记录,使用go()实现在用户的浏览记录中跳转:

history.go(-1) 等价于history.back()history.go(1) 等价于 history.forward()history.go(1) //前进两页history.go('cnblogs.com')

5.navigator对象

navigator.userAgent:用户代理字符串,用于浏览器监测中、

navigator.plugins:浏览器插件数组,用于插件监测

navigator.registerContentHandler 注册处理程序,如提供RSS阅读器等在线处理程序。

浏览器名称    navigator.appCodeName次版本信息    navigator.appMinorVersion完整的浏览器名称    navigator.appName浏览器版本    navigator.appVersion浏览器编译版本    navigator.buildID是否启用cookie    navigator.cookieEnabled客户端计算机CPU类型    navigator.cpuClass浏览器是否启用java    navigator.javaEnabled()浏览器主语言    navigator.language浏览器中注册的MIME类型数组    navigator.mimeTypes是否连接到网络    navigator.onLine客户端计算机操作系统或者CPU   navigator.oscpu浏览器所在的系统平台   navigator.platform浏览器中插件信息数组   navigator.plugins用户的首选项    navigator.preference()产品名称    navigator.product 产品的次要信息    navigator.productSub操作系统的语言    navigator.systemLanguage浏览器的用户代理字符串   navigator. userAgent操作系统默认语言    navigator.userLanguage用户个人信息对象    navigator.userProfile浏览器品牌    navigator.vendor浏览器供应商次要信息    navigator.vendorSub
 

转载于:https://www.cnblogs.com/justSmile2/p/9707004.html

你可能感兴趣的文章
AOP中的相关概念
查看>>
【转】内存溢出、内存泄漏、内存越界、缓冲区溢出、栈溢出
查看>>
监控系统信息模块psutil
查看>>
python tokenizer
查看>>
类的成员修饰符
查看>>
A - Race to 1 Again
查看>>
HDU 1754 I hate it
查看>>
实现滑动出现删除按钮的代码
查看>>
windows提权exp列表
查看>>
一个老软件测试工程师的日志(转)
查看>>
结对编程
查看>>
Android studio来开发移动App--SQA计划和系统测试规程
查看>>
模式学习(一)
查看>>
高精度计算(二)
查看>>
二位几何运算类
查看>>
ZOJ 3622 Magic Number 打表找规律
查看>>
BZOJ 1079: [SCOI2008]着色方案 记忆化搜索
查看>>
cdoj 1136 邱老师玩游戏 树形背包
查看>>
BZOJ 2751: [HAOI2012]容易题(easy) 数学
查看>>
UVALive 6910 Cutting Tree 并查集
查看>>