码迷,mamicode.com
首页 > 其他好文 > 详细

bom

时间:2018-09-26 16:12:27      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:def   函数   生成   elf   标准化   属性   高度   表达式   ati   

一、定义

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


bom

标签:def   函数   生成   elf   标准化   属性   高度   表达式   ati   

原文地址:https://www.cnblogs.com/justSmile2/p/9707004.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!