之前说过,在js的 运行环境为浏览器时,js就主要有三部分组成:

ECMAScript核心语法BOMDOM。今天就和大家详细说一下BOM的一些基础知识。

BOM

BOM通常被称为浏览器对象模型,主要描述了与浏览器交互的方法和接口。

作为JavaScript的一部分,因为每个浏览器对自己的BOM的实现方式不同,BOM并没有任何标准。

BOM主要处理浏览器窗口和框架,不过通常浏览器特定的 JavaScript 扩展都被看做 BOM的一部分。扩展包括:

-弹出新的浏览器窗口

-移动、关闭浏览器窗口以及调整窗口大小

-提供Web浏览器的详细信息的定位对象

-提供用户屏幕分辨率想信息的屏幕对象

-对cookie的支持

-IE 扩展了 BOM,加入了 ActiveXObject 类,可以通过 JavaScript 实例化 ActiveX 对象

虽然每种浏览器都有自己的 BOM 实现。有一些事实上的标准,如具有一个窗口对象和一个导航对象,不过每种浏览器可以为这些对象或其他对象定义自己的属性和方法。

下面是一些BOM当中包含的对象。

-Window对象

-Navigator对象

-Screen对象

-History对象

-Location对象

window对象

浏览器里面,window对象指当前的浏览器窗口。它也是当前页面的顶层对象,即最高一层的对象,所有其他对象都是它的下属

常用window对象的属性

window.open()方法既可以导航到一个特定的 URL 也可以用来打开一个新的窗口。

window.close()方法关闭窗口。

window.screenXwindow.screenY属性,返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离(单位像素)。这两个属性只读。

window.innerHeightwindow.innerWidth属性,返回网页在当前窗口中可见部分的高度和宽度,即视口(viewport)的大小(单位像素)。这两个属性只读。

window.scrollX属性返回页面的水平滚动距离,window.scrollY属性返回页面的垂直滚动距离,单位都为像素。这两个属性只读。注意,这两个属性的返回值不是整数,而是双精度浮点数。如果页面没有滚动,它们的值就是0。

Navigator对象

window.navigator属性指向一个包含浏览器和系统信息的 Navigator 对象。脚本通过这个属性了解用户的环境信息。

Navigator属性

navigator.userAgent属性返回浏览器的 User Agent 字符串,表示浏览器的厂商和版本信息。

Navigator.plugins属性返回一个类似数组的对象,成员是 Plugin 实例对象,表示浏览器安装的插件,比如 Flash、ActiveX 等

navigator.onLine属性返回一个布尔值,表示用户当前在线还是离线(浏览器断线)。

Screen 对象

Screen 对象表示当前窗口所在的屏幕,提供显示设备的信息。

Screen常用属性

Screen.height:浏览器窗口所在的屏幕的高度(单位像素)。除非调整显示器的分辨率,否则这个值可以看作常量,不会发生变化。显示器的分辨率与浏览器设置无关,缩放网页并不会改变分辨率。

Screen.width:浏览器窗口所在的屏幕的宽度(单位像素)

Location对象

Location对象是浏览器提供的原生对象,提供 URL 相关的信息和操作方法。

Location对象常见属性

-Location.href:整个 URL。

-Location.protocol:当前 URL 的协议,包括冒号(:)。

-Location.host:主机,包括冒号(:)和端口(默认的80端口和443端口会省略)。

-Location.hostname:主机名,不包括端口。

-Location.port:端口号。

-Location.pathname:URL 的路径部分,从根路径/开始。

-Location.search:查询字符串部分,从问号?开始。

-Location.hash:片段字符串部分,从#开始。

-Location.username:域名前面的用户名。

-Location.password:域名前面的密码。

-Location.origin:URL 的协议、主机名和端口。

相关方法

assign()方法接受一个 URL 字符串作为参数,使得浏览器立刻跳转到新的 URL。如果参数不是有效的 URL 字符串,则会报错。

replace()方法接受一个 URL 字符串作为参数,使得浏览器立刻跳转到新的 URL。如果参数不是有效的 URL 字符串,则会报错。

它与assign方法的差异在于,replace会在浏览器的浏览历史History里面删除当前网址,也就是说,一旦使用了该方法,后退按钮就无法回到当前网页了,相当于在浏览历史里面,使用新的 URL 替换了老的 URL。它的一个应用是,当脚本发现当前是移动设备时,就立刻跳转到移动版网页。

reload()方法使得浏览器重新加载当前网址,相当于按下浏览器的刷新按钮。

toString()方法返回整个 URL 字符串,相当于读取Location.href属性。

History 对象

History对象表示当前窗口的浏览历史

History对象常用属性

History.back():移动到上一个网址,等同于点击浏览器的后退键。对于第一个访问的网址,该方法无效果。

History.forward():移动到下一个网址,等同于点击浏览器的前进键。对于最后一个访问的网址,该方法无效果。

History.go():接受一个整数作为参数,以当前网址为基准,移动到参数指定的网址,比如go(1)相当于forward()go(-1)相当于back()。如果参数超过实际存在的网址范围,该方法无效果;如果不指定参数,默认参数为0,相当于刷新当前页面。

js基础知识--BOM的更多相关文章

  1. [JS复习] JS 基础知识

    项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display  :inline or bloc ...

  2. HTML+CSS+JS基础知识

    HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...

  3. Node.js基础知识

    Node.js入门   Node.js     Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始.比较独特的是,Node.js会假设在POSIX环境下运行 ...

  4. 网站开发进阶(十五)JS基础知识充电站

    JS基础知识充电站 1.javascript alert弹出对话框时确定和取消两个按钮返回值? 用的不是alert对话框,是confirm confirm(str); 参数str:你要说的话或问题: ...

  5. NodeJs>------->>第三章:Node.js基础知识

    第三章:Node.js基础知识 一:Node.js中的控制台 1:console.log.console.info  方法 console.log(" node app1.js 1> ...

  6. JS基础知识笔记

    2020-04-15 JS基础知识笔记 // new Boolean()传入的值与if判断一样 var test=new Boolean(); console.log(test); // false ...

  7. JavaScript 基础知识 - BOM篇

    前言 本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码 ...

  8. JS基础知识总结

      js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划() ...

  9. js基础知识总结(2016.11.1)

    js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...

随机推荐

  1. 安装linux下一些常用软件

    1.先卸载一些不常用的软件 apt purge ufw lxd lxd-client lxcfs lxc-common 2.安装一些常用软件 apt install iproute2 ntpdate ...

  2. 浮点数(UVa11809)题解

    浮点数(UVa11809)题解 如题 计算机常用阶码-尾数的形式保存浮点数.如下所示,若阶码有6位,尾数有8位,可以表达的最大的浮点数为0.1111111112 * 2 ^ 1111112.注意小数点 ...

  3. axios&spring前后端分离传参规范总结

    前后端分离开发的场景下,开发人员的工作内容更加专注与专业,但是也产生了一些额外的沟通成本.比如:本文中为大家说明的前后端参数传递与接受方法.本文主要是面对前端使用axios,后端使用Spring进行参 ...

  4. pnpm 的 workspace 实现 monorepo 工程

    前言 前端多个包管理的的方式一般都是采用monorepo的方式去管理,之前都是使用的lerna的workspace去管理.这段时间包管理切换到了pnpm上,它也有worksapce,可以支持monor ...

  5. Spring核心思想Ioc和Aop (面试)

    Spring核心思想Ioc和Aop (面试) 注意: Ioc和Aop并不是Spring提出的,在Spring之前就已经存在,Spring只是在技术层面给这两个思想做了非常好的实现. 1 Ioc 1.1 ...

  6. io几乎没有,iowait却很高

    遇到如下一种情况: top - 09:43:03 up 2 days, 22:48, 9 users, load average: 133.19, 132.60, 132.32 Tasks: 767 ...

  7. vue.js及H5常见跨域问题解决方案

    一.原生H5跨域问题解决方案 1.live-server 代理解决 首先在有node.js环境下,打开命令行工具,输入 npm install live-server -g 全局安装全局安装 live ...

  8. Downie for Mac最强视频下载工具(支持B站优酷土豆腾讯等)

    我搜集到的一款简单拖放链接到Downie,它就会下载该网站上的视频.理论可以下载各种视频网站上的视频! 应用介绍 Downie 是一款Mac平台上的优秀视频下载软件,使用非常简单,只需将下载链接放置D ...

  9. 从new File("")到jdk源码

    1. 概述 今天在项目中看到下面两行代码,看注释说是获取当前工作路径,之前也没有用过这种用法,比较好奇还能这样用,所以研究了一下源码. //获取当前工作路径 File file = new File( ...

  10. 聊天机器人框架Rasa资源整理

      Rasa是一个主流的构建对话机器人的开源框架,它的优点是几乎覆盖了对话系统的所有功能,并且每个模块都有很好的可扩展性.参考文献收集了一些Rasa相关的开源项目和优质文章. 一.Rasa介绍 1.R ...