红宝书学习笔记之 BOM

主要是红宝书第12章内容

1. 浏览器窗口相关API

// 1 moveTo(x, y) 移动浏览器窗口到坐标 (x, y)
window.moveTo(100, 100); // 在chrome浏览器中不可用
// 2 moveBy(x, y) 将浏览器窗口移动 (x, y) 距离
window.moveBy(x, y); // 在chrome浏览器中不可用
// 3 resizeTo(x, y) 将浏览器窗口大小缩放为 (x, y)
window.resizeTo(100, 100); // 在chrome浏览器中不可用
// 4 resizeBy(x, y) 将浏览器窗口大小缩放 (x, y)
window.resizeBy(100, 100); // 在chrome浏览器中不可用
/*上面4个api存在兼容性问题，不可以在chrome中直接用于当前window，但是可以应用于使用window.open()打开的窗口*/

// 5 innerWidth innerHeight outerWidth outerHeight clientWidth clientHeight
window.innerWidth // 浏览器视口宽度
window.innerHeight // 浏览器视口高度
window.outerWidth // 浏览器宽度（包含工具栏等）
window.outerHeight // 浏览器高度（包含工具栏等）
document.documentElement.clientWidth // 浏览器视口宽度
document.documentElement.clientHeight // 浏览器视口高度
document.body.clientWidth // 浏览器视口宽度
document.body.clientHeight // 浏览器视口高度
// 由于兼容性问题，需要如下处理
let pageWidth = window.innerWidth,
	pageHeight = window.innerHeight;
if (typeof pageWidth !== "number") {
	if (document.compatMode === "CSS1Compat") { // 检查页面是否处于标准模式
		pageWidth = document.documentElement.clientWidth;
		pageHeight = document.documentElement.clientHeight;
	} else {
		pageWidth = document.body.clientWidth;
		pageHeight = document.body.clientHeight;
	}
}
// 可简写为
let pageWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
	pageHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

// 6 window.open(url, title, desc) 打开一个窗口，参数分别为新窗口的 url， 窗口名字， 窗口属性（字符串，且不能有空格）
const newWin = window.open('https://www.baidu.com', 'newWindow', 'width=400,height=400,left=100,top=100'); // 打开一个新窗口，url为百度，窗口名为 newWindow（如果此窗口名已存在则在对应的窗口打开新窗口，也可以使用字符串'_self'，'_parent'， '_top'， '_blank'表示当前窗口，父级窗口，顶层窗口，新开的窗口）, 窗口属性为：宽 400px 高 400px 左上角x轴坐标 100px 左上角y轴坐标 100px, 此外还可以设置别的属性
// newWin.opener 指向打开的新窗口的父级窗口
newWin.opener
// 此外有 self 表示当前窗口，parent 表示父级窗口， top 表示顶层窗口

// 检测打开窗口是否成功
let blocked = false;
try {
	const newWin = window.open('https://www.baidu.com', 'newWindow', 'width=400,height=400,left=100,top=100');
	if (newWin === null) {
		blocked = true;
	}
} catch(err) {
	blocked = true;
}
if (blocked) {
	alert('窗口打开失败!');
}
// 文档相对于视口移动距离，相当于滚动条移动距离 pageXOffset(等价于screenX) pageYOffset(等价于screenY)
window.pageXOffset; // x 轴方向滚动条移动距离
window.pageYOffset; // y 轴方向滚动条移动距离
// screenTo() screen() screenBy() screen()等价于screenTo()
window.screenTo(0, 0) // 将页面滚动到 (0, 0)
window.screen(0, 0) // 将页面滚动到 (0, 0)
window.screenBy(0, 0) // 将页面滚动 (0, 0) 距离
// 上述方法都可以接一个对象，对象第三个参数表示滚动方式
window.screenTo({
	left: 0, 
	top: 0, 
	behavior: 'auto'
}); // 正常滚动
window.screen({
	left: 0, 
	top: 0, 
	behavior: 'smooth'
}); // 平滑滚动

2. location

// location是window上的属性
window.location === location; // true
location.href // 浏览器地址
location.search // 浏览器地址的query部分
location.hash // 浏览器地址的hash部分
/*等等...*/

// 修改 url 有3种方法 3 种方法等价，都相当于调用了 location.assign
location.assign(newUrl);
location.href = newUrl;
location = newUrl;

// 每次修改 location 的 href 等值都会在浏览器里面留下一条记录，这条记录保存在 history 中
// 如果不想保留记录，则使用 replace，调用 replace 后不能返回上一页
location.replace(newUrl);
// 使用 location.reload(布尔值) 重新加载页面
location.reload(); // 重新加载页面，但是不强制从服务器加载，很有可能是从缓存里面加载
location.reload(true); // 重新加载页面，强制从服务器加载
// 由于加载页面后后续代码不一定执行，因此 location.reload() 最好放在代码最后

3. history

// history 保存了浏览器历史记录，但是出于安全性可见的只有部分
history.go(number); // 前往第几个历史记录
history.forward(); // 前往下一个历史记录
history.back(); // 返回到上一个历史记录
history.length; // 保存的历史记录个数
// 可以使用 history.pushState()手动添加一条历史记录，但是必须满足同源。用这种方式不会刷新页面
history.pushState({ url: 'index.html', name: 'newHistory', desc: '测试一下' }, 'newHistory', 'index.html');
// 参数1 表示 state对象，可以放一些需要的信息，但不要放dom节点，应该放可序列化的对象。容量为 500KB~1MB 
// 参数2 表示 title
// 参数3 可选，传入一个相对 url，注意需要是有效地址，否则刷新会报错
// 使用pushState()添加历史记录后会相应的启用后退按钮。此时点击后退按钮会触发popstate事件
window.addEventListener('popstate', function (event) {
	console.log(event.state); // 打印出跳转后页面history的 state
});
// 如果想要替换当前记录，可以使用replaceState，参数和pushState一致。使用replaceState不会新增记录
history.replaceState({ url: 'index2.html', name: 'newHistory2', desc: '测试一下2' }, 'newHistory2', 'index2.html');
// hashchange 事件可以监听到 hash 值变化
window.addEventListener('hashchange', function (e) {
	console.log(e); // e 中间保存有变化前后的 url
});
// 使用 pushState() 和 replaceState() 不会触发 hashchange，但是手动点击返回按钮会触发

4. navigator

// navigator 主要是保存了浏览器的一些信息 例如 userAgent等
window.navigator.userAgent;
window.navigator.language;
window.navigator.languages;
/*等等...*/
// navigator.plugins 保存了插件信息 可以利用它来判断浏览器插件
for (const plugin of navigator.plugins) {
	console.log(plugin);
	// 每个 plugin 中保存了插件的 MIME 类型，插件名，插件描述等
}
// 检测插件是否存在
function hasPlugin(pluginName) {
	pluginName = pluginName.toLowerCase();
	for (const plugin of navigator.plugins) {
		if (plugin.name.toLowerCase().indexOf(pluginName) > -1) {
			return true;
		}
	}
	return false;
}
// 兼容IE
function hasPlugin4IE(pluginName) {
	try {
		new ActiveXObject(pluginName);
		return true;
	} catch(err) {
		return false;
	}
}