JS 基础 —— BOM

矫情吗；* 2022-06-12 06:24 137阅读 0赞

浏览器可视为一个对象，即window 对象，与浏览器相关的文档（document）、屏幕（screen）、历史记录（history）、当前访问位置（location）、浏览器信息（navigator）都是其属性，而定时器、模式弹窗等都是其方法。window的子对象可不写window.前缀。

一、window对象

属性：

window.innerHeight：当前html页面的高度（注意不是整个浏览器窗口！整个浏览器窗口用screen对象）；

window.innerWidth：当前页面的高度。

对IE 8~5，对应属性应为：

document.documentElement.clientHeight/clientWidth 或 document.body.clientHeight/clientWidth。

通用写法：var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

方法：

window.open("url")：打开一个新标签页，显示url对应的页面；

window.close()：关闭当前标签页（注意是标签页，所以如果一个标签页被划分显示多个html，则在其中一个html中使用此方法将无效）；

window.moveTo(x,y)：移动窗口；

window.resizeTo(w,h)：调整窗口大小。

window.setTimeout(字符串脚本或function,delayTime)：设置延时执行,如：window.setTimeout("alert('2秒')",2000);

window.setInterval(字符串脚本或function,spanTime)：定期不断执行;

window.clearTimeout(句柄)、window.clearInterval(句柄):关闭定时事件。

简单秒表：

var seconds = 0;

var timmer = window.setInterval("document.getElementById('displaySeconds').innerHTML= ++seconds",1000);

二、window.location对象

属性：

以一个Test工程的index.html测试页面完整路径为例：http://localhost:8080/Test/index.html

location.hostname：返回web主机域名，即localhost；

location.pathname：返回当前页面的路径和文件名，即相对路径：/Test/index.html：

location.port：web主机端口，即8080；

location.protocol：返回使用的web协议（http://或https://），即http://；

location.href：返回当前页面的URL，即完整路径：http://localhost:8080/Test/index.html。

即 href = protocol+hostname+":"+port+pathname

方法：

location.assign("http://www.baidu.com")：加载新的文档；

location.reload()：重新加载当前文档，相当于刷新；

location.replace("www.baidu.com")：和assign方法差不多。

三、window.history对象

属性：

history.length：返回历史记录数量。

方法：

history.back()：后退到上个页面；

history.forward()：与浏览器向前按钮相同；

history.go(number|URL)：加载记录表中某个具体页面。参数为数字时以当前页面为0，向后叠减去1，向前叠加1

如：history.go(-1) 相当于location.back()，最多为history.go(1-history.length)。

四、window.screen对象

属性：

screen.availWidth：可用的屏幕宽度（指整个浏览器能展示页面的部分的宽度，而非某个单独的html页面——window.innerWidth）；

screen.avalHeight：可用的屏幕高度（同上，都指眼睛直接可见的部分，不包括未滚动出的部分）；

screen.width：显示器宽度（如通常的1366\*768中的1366）；

screen.height：显示器高度。

screen.updateInterval：设置或返回屏幕刷新率（整数）。

五、window.navigator对象

属性：

navigator.appCodeName：代码名，以Netscape代码为基础的浏览器中，名都为Mozilla；

navigator.appName：浏览器内核名；

navigator.appVersion：版本；

navigator.cookieEnabled：是否支持cookie；

navigator.platform：平台，如win32；

navigator.userAgent：用户代理；

navigator.systemLanguage：系统语言。

注：navigator对象的信息具有误导性（因为它可被浏览器使用者更改；同时浏览器无法报告晚于其发布的新操作系统——这个就算了吧），不应该被用于识别浏览器，最好根据浏览器差异性识别。

六、window.document.cookie对象

发表评论取消回复

表情：

评论列表（有 0 条评论，137人围观）

还没有评论，来说两句吧...

相关阅读

相关 javascript BOM基础

BOM 也叫浏览器对象模型，它提供了很多对象，用于访问浏览器的功能。 BOM 缺少规范，每个浏览器提供商又按照自己想法去扩展它，那么浏览器共有对象就成了事实的标准。所...

野性酷女/ 2024年04月17日 06:06/ 0 赞/ 25 阅读

相关 BOM 基础详解

文章目录一、BOM 概述二、常见事件 1.页面加载事件 2.调整窗口大小事件三、定

逃离我推掉我的手/ 2023年09月26日 09:15/ 0 赞/ 8 阅读

相关 js操作BOM

什么是Bom? Bom是浏览器对象。它提供与浏览器的交互5大属性。有哪些常用的Bom属性呢？ ![在这里插入图片描述][watermark_type_ZmFuZ

Myth丶恋晨/ 2022年12月18日 00:45/ 0 赞/ 118 阅读

相关 js之BOM

1 BOM 的概念 1.1 什么是 BOM BOM 全称 Browser Object Model，译为浏览器对象模型。 BOM 是浏览器为 JavaScript

红太狼/ 2022年11月22日 12:48/ 0 赞/ 128 阅读

相关 js操作BOM

1.什么是Bom? Bom是浏览器对象。它提供与浏览器的交互5大属性。 2.有哪些常用的Bom属性呢？ ![在这里插入图片描述][watermark_type_ZmF

末蓝、/ 2022年11月12日 01:43/ 0 赞/ 127 阅读

相关 JS 基础 —— BOM

浏览器可视为一个对象，即window 对象，与浏览器相关的文档（document）、屏幕（screen）、历史记录（history）、当前访问位置（location）、浏览器信

矫情吗；*/ 2022年06月12日 06:24/ 0 赞/ 138 阅读

相关 javascript BOM基础

BrowserObjectModel ![这里写图片描述][70] 常见弹窗 prompt("恭喜你"); confirm("确认进行下一步吗");

小咪咪/ 2022年05月24日 01:38/ 0 赞/ 192 阅读

相关 JS之BOM

1.BOM定义 BOM（浏览器对象模型），BOM可以使我们通过JS来操作浏览器，在BOM中为我们提供了一组对象，用来完成对浏览器的操作。 2.BOM对象 1. Wi

川长思鸟来/ 2022年04月23日 09:24/ 0 赞/ 167 阅读

相关 js--BOM

前言内容字面值： confirm方法： window.location属性

青旅半醒/ 2021年09月27日 04:22/ 0 赞/ 289 阅读

相关 js BOM

<html> <head> <title>BOM</title> <meta charset="utf-8">

绝地灬酷狼/ 2021年08月27日 15:01/ 0 赞/ 272 阅读