BOM操作

新星_
146 阅读6分钟

BOM是什么

BOM是browser object model的缩写，简称浏览器对象模型，核心对象是window对象，BOM操作就是操作window对象。

DOM是document object model的缩写，简称文档对象模型，核心对象是document对象，DOM操作就是操作document对象。

BOM不是W3C的标准模型但是所有浏览器都支持，所有浏览器厂商制作的API功能基本相似

JavaScript语法的标准化组织是ECMA

DOM的标准化组织是W3C

window

window对象是BOM的顶层(核心)对象，所有对象都是通过window对象延伸出来的，也可以称为window的子对象。由于window是顶层对象，因此调用它的子对象时可以不显示指明。比如window.document.write()等价于document.write()

window下的5大功能对象有:navigatior,screen,document,history,location。

window的属性

closed：返回窗口是否已被关闭，返回布尔值

document：对 Document 对象的只读引用

history：对History对象的只读引用

innerHeight：返回窗口的文档显示区的高度

innerWidth：返回窗口的文档显示区的宽度

outerHeight：返回窗口的外部高度，包含工具条与滚动条

outerWidth：返回窗口的外部宽度，包含工具条与滚动条

screenLeft：返回浏览器相对于设备屏幕左上角窗口的x坐标

screenTop：返回浏览器相对于设备屏幕左上角窗口的y坐标

screenX：返回浏览器相对于设备屏幕窗口的x坐标

screenY：返回浏览器相对于设备屏幕窗口的y坐标

ScreenTop和ScrennLeft属性IE，Safari、Opera和Chrome中用来表示窗口位置属性，而screenX和screenY是FIrefox、Safari和Chrome中用来表示窗口位置的属性。也就说，Safari和Chrome同时支持这两种属性。

location：用于窗口或框架的Location 对象

navigator：对Navigator 对象的只读引用

onload ：指定所有配置都加载完成时(图片例外)调用的函数

pageXOffset：返回当前页面相对于窗口显示区左上角的 X 位置(body横向滚动的距离)

pageYOffset：返回当前页面相对于窗口显示区左上角的 Y 位置(body纵向滚动的距离)

screen：对Screen对象的只读引用

window的方法

alert()：显示带有一段消息和一个确认按钮的警告框，如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false。

close()：关闭浏览器窗口

confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框

open(url,打开方式,新窗口配置,BOOL)：打开一个新的浏览器窗口 4个参数都可选(一般就填第一个参数) url:新窗口地址

打开方式:_blank(默认，打开新的窗口),_parent,_self(在当前窗口打开),_top

配置(各种):一般默认 BOOL:新窗口在历史记录里面有,要不要替换

print()：打印当前窗口的内容。

prompt(提示用户的内容"sometext",输入框默认值是可选参数"defaultText")：显示可提示用户输入的对话框。 如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回null。

scrollBy()：按照指定的像素值来滚动内容(前提是你的有滚动条:内容够多)

scrollTo()：把内容滚动到指定的坐标。(前提是你的有滚动条:内容够多)

setInterval(callback,times)：按照指定的周期（以毫秒计）来调用函数

setTimeout(callback,times)：在指定的毫秒数后调用函数

clearInterval()：取消由 setInterval() 设置的计时器

clearTimeout()：取消由 setTimeout() 方法设置的计时器

resizeTo()：用于把窗口大小调整为指定的宽度和高度。

window.resizeTo(width,height)。参数是浏览器窗口新宽度和新高度

resizeBy()：用于根据指定的像素来调整窗口的大小，此方法定义指定窗口的右下角角落移动的像素，左上角将不会被移动(它停留在其原来的坐标)。

参数：width必需，要使窗口宽度增加的像素数。可以是正、负数值。 height可选，要使窗口高度增加的像素数。可以是正、负数值。参数是新窗口与原窗口的宽度和高度的差值。

5.navigator：对象包含有关访问者的信息

属性:

appCodeName：返回浏览器的代码名

appName：返回浏览器的名称

appVersion：返回浏览器的平台和版本信息

cookieEnabled：返回指明浏览器中是否启用 cookie 的布尔值

platform：返回运行浏览器的操作系统平台

userAgent：返回由客户机发送服务器的user-agent 头部的值

6.screen：对象包含用户屏幕的信息

属性:

availHeight：返回屏幕的高度是物理像素值（屏幕的分辨率）（不包括Windows任务栏）

availWidth：返回屏幕的宽度是物理像素值（屏幕的分辨率）（不包括Windows任务栏）

height：返回屏幕的总高度是物理像素值（屏幕的分辨率）

width：返回屏幕的总宽度是物理像素值（屏幕的分辨率）

pixelDepth：返回屏幕的颜色分辨率（每象素的位数）

7.history（H5之后才有的技术）：对象包含浏览器历史

属性:

length：返回访问历史列表中的网址数

方法：

back()：加载 history 列表中的前一个 URL，等同于在浏览器中点击后退按钮。

forward()：加载 history 列表中的下一个 URL，等同于在浏览器中点击前进按钮

go(number)：加载history列表中的某个具体页面就是浏览器里的历史记录，负数是后退,正数是前进

8.location：对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面

属性:

hash：返回一个URL的锚部分//192.168.1.102:8081?name=jack&pwd=123#page1

host：返回一个URL的主机名和端口

hostname：返回URL的主机名

href：返回完整的URL

window.location.href不仅可读就是获取当前网址，也可写设置新的网址就跳转到其他页面

pathname：返回的URL路径名

port：返回一个URL服务器使用的端口号

protocol：返回一个URL协议

search：返回一个URL的查询部分

方法:

assign(url)：载入一个新的文档

reload()：重新载入当前文档

replace(url)：用新的文档替换当前文档

关于刷新

window.history.go(0); 是直接读取缓存数据，不会从服务器端获取数据;
window.location.reload(true); 不管有没有缓存，都会强制刷新;
window.location.reload(false); 有缓存就走缓存，没缓存就强制刷新;

关于页面跳转

<script>
    //使用href属性跳转
    window.location.href ='https://www.sogou.com';
    //使用assign()方法跳转
    window.location.assign('https://www.sogou.com');
    //使用replace()方法跳转
    window.location.replace('https://www.sogou.com');
    window.location="要转向的页面"
    window.open(routeUrl.href, '_blank'); //在新窗口显示目标网页 window.open(routeUrl.href, '__self'); //在当前窗口显示目标网页
</script>

关于窗口大小调整

resizeBy() 方法Opera和Chrome不支持

resizeTo() 方法

不能设置那些不是通过 window.open 创建的窗口或 Tab 的大小。

当一个窗口里面含有一个以上的 Tab 时，无法设置窗口的大小。

avatar
文章
阅读
粉丝