Javascript内容整理——BOM

Posted 齐木z

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript内容整理——BOM相关的知识,希望对你有一定的参考价值。

javascript BOM

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。


BOM(Browser Object Model (BOM))即浏览器对象模型

BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性,现代的浏览器已经(几乎)实现了 JavaScript 交互相同的方法和属性,因此它经常作为 BOM 的方法和属性被提到

BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window

BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分

常见的BOM对象:

window:代表整个浏览器窗口(window是BOM中的一个对象,并且是js中的顶级的对象)

Screen:代表用户的屏幕信息

Navigator :代表浏览器当前的信息,通过Navigator我们可以获取用户当前使用的是什么浏览器

Location: 代表浏览器当前的地址信息,通过Location我们可以获取或者设置当前的地址信息

History:代表浏览器的历史信息,通过History我们可以实现上一步/刷新/下一步操作


window对象

windows对象是JavaScript中的顶级对象,所有浏览器都支持 window 对象,它表示浏览器的窗口

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员,在调用的时候可以省略window

全局变量是 window 对象的属性

全局函数是 window 对象的方法

甚至 html DOM 的 document 也是 window 对象的属性之一:

window.document.getElementById("header");

或者

document.getElementById("header");

window对象的方法

1、alert()

window.alert("Hello world!"); //显示带有一段消息和一个确认按钮的警告框

2、confirm()

window.confirm("Hellomegs");  //显示一个带有指定消息和OK及取消按钮的对话框

出现两个按钮:确定和取消

3、prompt()

window.prompt("content");  //用户输入内容,content为提示内容

4、open(pageURL,name,parameters)

pageURL:子窗口路径
name:子窗口句柄。(name声明了新窗口的名称,方便后期通过name对子窗口进行引用)
parameters :窗口参数(各参数用逗号分隔)

window.open(pageURL,name,parameters)  //打开一个新的浏览器窗口或查找一个已命名的窗口
width 窗口宽度 height 窗口高度
left 窗口X轴坐标 top 窗口Y轴坐标
toolbar 是否显示浏览器工具栏 menubar 是否显示菜单栏
scrollbars 是否显示滚动条 location 是否显示地址字段
status 是否显示添加状态栏

5、close()

window.close();  //关闭浏览器窗口

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

  • window.innerWidth - 浏览器窗口的内部宽度

  • window.innerHeight - 浏览器窗口的内部高度

对于 Internet Explorer 8、7、6、5:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

或者

  • document.body.clientHeight
  • document.body.clientWidth

实用的 JavaScript 方案(涵盖所有浏览器):

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

该例显示浏览器窗口的高度和宽度:(不包括工具栏/滚动条)


其他 Window 方法

window.open() - 打开新窗口

window.close() - 关闭当前窗口

window.moveTo() - 移动当前窗口

window.resizeTo() - 调整当前窗口的尺寸


Window Screen

包含有关客户端显示屏幕的信息

window.screen 对象在编写时可以省略 window

属性:

1、screen.availWidth

性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏

console.log("页面宽:"+screen.availWidth)  //返回可用的屏幕宽度

2、screen.availHeight

属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏

console.log("页面高:"+screen.availHeight)  //返回可用的屏幕高度

Window Location

window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面

属性:

location.herf 返回当前加载页面的完整URL
location.hash 返回URL中的hash(#号后 跟零或多个字符),如果不包含则返回空字符串
location.host 返回服务器名称和端口号
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回URL中指定的端口号,如果没有,返回空字符串
location.protocol 返回所使用的 web 协议(http:// 或 https://)
location.search 返回URL的查询字符串,这个字符串以问号开头

Window History

window.history 对象包含浏览器的历史

history.back() 回到历史记录的上一步
history.forward() 回到历史记录的下一步
history.go(-n) 回到历史记录的前n步
history.go(n) 回到历史记录的后n步

Window Navigator

window.navigator 对象包含有关访问者浏览器的信息

UserAgent:用来识别浏览器名称、版本、引擎 以及操作系统等信息的内容,可以判断设备的终端是移动还是PC

let agent = window.navigator.userAgent;
    if(/chrome/i.test(agent)){
        alert("谷歌");
    }else if(/firefox/i.test(agent)){
        alert("火狐");
    }else if(/msie/i.test(agent)){
        alert("低级IE浏览器");
    }else if("ActiveXObject" in window){
        alert("低级IE浏览器");
    }

定时器

通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行,这称之为计时事件。

超时调用:setTimeOut(code,millisec)

code:要调用的函数或要执行的JavaScript代码串

millisec:在执行代码前需等待的毫秒数

在指定的毫秒数后调用函数或计算表达式,setTimeout()只执行code一次

清除超时调用:clearTimeout(id_of_settimeout)

id_of_settimeout :由setTimeout()返回的ID值,该值标识要取消的延迟执行代码块

取消由setTimeout()方法设置的timeout

间歇调用:setInterval(code,millisec)

每隔指定的时间执行一次代码

单击开始计时按钮后,程序开始从 10 以秒倒计时

<body>
		<input type="button" value="倒计时开始10" id="btn" disabled />
		<script>
			var btn = document.getElementById("btn");
			var num = 10;
			var timerId = setInterval(function() {
				num--;
				btn.value = "到时器开始" + num;
				if (num == 0) {
					clearInterval(timerId);
					btn.disabled = false;
					btn.value = "可以点了";
				}
			}, 1000);
		</script>
	</body>

人生最可贵的事情,便是少年的迷茫。 ——三毛

以上是关于Javascript内容整理——BOM的主要内容,如果未能解决你的问题,请参考以下文章

JS基础的笔记整理

常用python日期日志获取内容循环的代码片段

55-前端-JavaScript

JS知识整理随笔 BOM

javascript之BOM对象(二location对象)

2019.7.22JS初始内容的整理以及4道题目