JavaScript：BOM

最新推荐文章于 2024-09-17 13:42:29 发布

青蛙不吃草～

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量132

点赞数

分类专栏： Web 文章标签： javascript BOM

本文链接：https://blog.csdn.net/qq_18133317/article/details/109289907

版权

Web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

BOM

BOM （Browse Object Mode）:即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是Window

BOM 由一系列相关对象构成，并且对每个对象提供了很多方法与属性
BOM 缺乏标准，兼容性比较差

Window

Window包含对象:document、 location 、navigation 、screen、 history

window 对象是浏览器的顶级对象，它具有双重角色

1:他是JS访问浏览器窗口的一个接口
2:他是一个全局对象。定义在全局作用域中的变量、函数都会成为window的属性和方法.在调用的时候可以省略window
注意：window下一个特殊属性window.name

<script>
	var num = 10;
	console.log(num);
	console.log(window.num);
	
	function fn(){
		console.log(11);
	}
	fn();
	window.fn();
</script>

获取window尺寸

<body>

<p id="demo"></p>
<script>
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
x=document.getElementById("demo");
x.innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。"
</script>

</body>

窗口加载事件

window.noload = function(){}
或
window.addEvenlistener(“load”,function(){});

window.noload是窗口（页面）加载事件，当文档内容完全加载完成后会触发该事件（包括图像，脚本文件，CSS文件等），就调用处理函数。

注意：window.noload传统注册事件方式只能写一次，如果有多次，会以最后一个window.noload为准

<script>
	window.addEventListener('load',function(){
		var btn = document.querySelector('button');
		btn.addEventListener('click',function(){
			alert('点一点');
		});
	});
</script>

document.addEventListener(‘DOMContentLoaded’,function(){}) IE9以上才支持

DOMContentLoaded事件触发时，当DOM加载完成后触发该事件（不包含样式表，图片，flash等），就调用处理函数。执行顺序在window.onload前面

监听窗口大小调整事件

window.onresize = function(){}
或
window.addEventListener(“resize”,function(){})

window.onresize 当浏览器窗口大小改变时，就会触发该事件
（window.innerWidth获取当前屏幕的宽度，window.innerHeight获取当前屏幕高度）

其它Window方法

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

Window Screen

window.screen.availWidth - 可用的屏幕宽度
window.screen.availHeight - 可用的屏幕高度.以像素计，减去界面特性，比如窗口任务栏。

定时器

setTimeout()

window.setTimeout(回调函数，延迟的毫秒数)

setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行回调函数。

<script>
	function callBack(){
		console.log('2秒后');
	}
	//window.setTimeout(callBack,2000);
	//创建多个定时器,这里time1和time2就是不同的定时器了
	var time1 = window.setTimeout(callBack,2000);
	var time2 = window.setTimeout(callBack,3000);
	//清除定时器
	window.clearTimeout(time1);
</script>

setInterval()

window.setInterval(回调函数，间隔的毫秒数)

setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数

<script>
	function callBack(){
		console.log('2秒后');
	}
	//window.setInterval(callBack,2000);
	//创建多个定时器,这里time1和time2就是不同的定时器了
	var time1 = window.setInterval(callBack,2000);
	//清除定时器
	window.clearInterval(time1);
</script>

同步、异步

JS是单线程语言，也就是说同一时间执行一个任务

单线程意味着，所以任务都需要排队，前一个任务结束，才执行后一个任务。这样就导致一个问题：如果前面任务执行的时间过长，后面就必须要等待前面任务完成后才执行，在页面上的表现就是卡顿

为了解决上述问题H5提出wevb worker标准，允许JavaScript脚本创建多线程。于是JS中就出现了同步和异步

同步

多个任务按顺序排列执行，前一个任务执行结束后才能继续执行下一个任务

异步

多个任务不按顺序一起执行，后面任务不需要等待前面的任务执行完成就可以开始执行

JS执行机制

1：在JS中同步任务都在主线程上执行，形成一个执行栈。
2：异步任务不是开发者自己开辟子线程，而是调用特定函数时，由异步进程判定是否马上将异步任务放到任务队列中。
3：执行栈中所有同步任务执行完后，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

同步任务

在JS中同步任务都在主线程上执行，形成一个执行栈。

异步任务

在JS中异步任务是通过回调函数实现的，异步任务会被添加到任务队列中（任务队列也称为消息队列）等待主线程中的同步任务都执行完后再执行消息队列中的异步任务

一般而言，异步任务有以下三种类型
1：普通事件，如click，resize等
2：资源加载，如load，error等
3：定时器，包括setInterval,setTimeout等

console.log(1);
document.onclick = function(){
	console.log('click');
}
console.log(2);
setTimeout(function (){
	console.log(3);
},3000)
//最后在不点击按钮的情况下，执行顺序为： 1 2 3

//执行栈中同步任务为：console.log(1); console.log(2);

//异步进程中异步任务为：document.onclick ；setTimeout

//当时间过了3秒后将setTimeout加入到消息队列中，
//当document.onclick点击了的时候就将document.onclick放入消息队列中

Location对象

URL

一般语法格式

protocol://host[:port]/path/[query]#fragment
http://www.baidu.com/index.html?name=andy&age=18#link

组成	说明
protocol	通信协议常用http ftp maito等
host	主机（域名）www.baidu.com
port	端口号，可选。省略时使用方案的默认端口号。http默认端口号80
path	路径由零或者多个‘/’符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query	参数以键值对的形式，通过&符合分隔开来
fragment	片段 #后面内容常见于链接锚点

属性

location对象属性	返回值
location.href	获取或设置整个URL
location.host	返回主机（域名）www.baidu.com
location.port	返回端口号
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段

<button>点击跳转百度</button>
<script>
	var btn = document.querySelector('button');
	btn.addEventListener('click',function(){
		location.href = 'https://www.baidu.com';
	})
</script>

例子：不同页面直接传递数据

//登录页 
<body>
	<form action="index.html">
		用户名：
		<input type="text" name="uname" />
		<input type="submit" value="登录"/>
	</form>
</body>
//点击登录按钮将登录页面输入框数据传递给 index.html页面

//index.html页面 通过location.search拿到传递过来的参数
<script>
	//输出参数?uname=xxx
	console.log(location.search);
	//去掉问好
	var params = location.search.substr(1);
	//利用等号把字符串分割为数组
	var arr = params.split('=');
	console.log(arr);
</script>

方法

location对象方法	返回值
location.assign()	跟href一样，可以跳转页面
location.replach()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新按钮或者F5 。如果参数为trun 相当于强制刷新ctrl+f5

Navigator

navigator 对象包含了浏览器的信息，它有很多属性，我们常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值


<script>
function browserRedirect() {
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
    if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) ){
        return false;
    } else {
        return true;
    }
}
var flag = browserRedirect();//false PC端  ；true 手机端 
</script>

其它方法

navigator.cookieEnabled - 浏览器 Cookie 属性返回 true，如果 cookie 已启用，否则返回 false：
navigator.appName - 属性返回浏览器的应用程序名称：
navigator.javaEnabled() - Java 是否启用？方法返回 true，如果 Java 已启用

History

window 对象给我们提供了history对象，与浏览器历史进行交互。该对象包含用户（在浏览器窗口中）访问过的URL

history对象方法	作用
back()	后退到上一次访问的网页
forward()	前进到之前访问的网页
go(参数)	跳转到指定访问过的页面。参数果然是1 前进1个页面。如果是-1 后退1个页面

Cookies

Cookie 是在您的计算机上存储在小的文本文件中的数据。H5之前，存储主要是用cookies。cookies缺点有在请求头上带着数据，大小是4k之内。主Domain污染。

//设置cookies cookie 的名字（cname），cookie 的值（cvalue），以及知道 cookie 过期的天数（exdays）
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
//获取cookie
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
        if (c.indexOf(name)  == 0) {
            return c.substring(name.length, c.length);
         }
    }
    return "";
}

function checkCookie() {
    var user = getCookie("username");
    if (user != "") {
        alert("Welcome again " + user);
    } else {
        user = prompt("Please enter your name:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}

本地存储

通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。

在 H5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。
与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。

window.localStorage

存储没有截止日期的数据,即永久存储。
可存储约5M数据，只能存储字符串，可以将对象JSON.stringify()编码后存储

// 存储
localStorage.setItem("lastname", "Gates");
// 取回
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
//删除
localStorage.removeItem("lastname");
//清除所有数据
localStorage.clear()

//实例解释：
//创建 localStorage 名称/值对，其中：name="lastname"，value="Gates"
//取回 "lastname" 的值，并把它插到 id="result" 的元素中

window.sessionStorage

针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）
存储容易约20M，只能存储字符串，可以将对象JSON.stringify()编码后存储

// 存储
sessionStorage.setItem("lastname", "Gates");
// 取回
document.getElementById("result").innerHTML = sessionStorage.getItem("lastname");
//删除
sessionStorage.removeItem("lastname");
//清除所有数据
sessionStorage.clear()

//实例解释：
//创建 localStorage 名称/值对，其中：name="lastname"，value="Gates"
//取回 "lastname" 的值，并把它插到 id="result" 的元素中