JavaScript BOM 概念
浏览器对象模型（Browser object model）简称 BOM。Js 通过 BOM 和浏览器进行交互，可以获取屏幕尺寸，窗口大小，页面地址，历史记录等浏览器相关信息，也可以控制浏览器执行某些行为：弹出信息，页面跳转，打开窗口，关闭窗口，调整窗口大小等。
浏览器对象模型用 window 对象来表示，所有 JavaScript 全局变量、全局函数会自动成为
window 对象的成员。DOM 的 document 也是 window 对象的一个属性。
JavaScript 窗口
在JavaScript中，可以使用window对象来操作浏览器窗口。window对象是一个全局对象，表示当前浏览器窗口。通过window对象，可以执行诸如打开新窗口、关闭窗口、调整窗口大小、获取窗口的位置和大小等操作。
1、打开一个新窗口：
window.open("https://www.example.com");
2、关闭当前窗口：
window.close();
3、调整窗口大小：
window.resizeTo(500, 300);
4、获取窗口的位置：
var x = window.screenX; var y = window.screenY;
5、获取窗口的大小：
var width = window.innerWidth; var height = window.innerHeight;
JavaScript 尺寸
在JavaScript中，可以通过以下几种方式获取元素的尺寸：
1、offsetWidth和offsetHeight属性：返回元素的宽度和高度，包括边框和滚动条（如果有）。
var element = document.getElementById("myElement"); var width = element.offsetWidth; var height = element.offsetHeight;
2、clientWidth和clientHeight属性：返回元素的宽度和高度，不包括边框和滚动条。但是如果有滚动条，会包括滚动条的大小。
var element = document.getElementById("myElement"); var width = element.clientWidth; var height = element.clientHeight;
3、getBoundingClientRect()方法：返回一个包含元素位置和尺寸信息的DOMRect对象。可以使用其属性来获取元素的左边距、上边距、宽度和高度。
var element = document.getElementById("myElement"); var rect = element.getBoundingClientRect(); var width = rect.width; var height = rect.height;
需要注意的是，以上方法获取的尺寸都是以像素为单位的整数值。
JavaScript 地址信息与页面跳转
1、
console.log(window.location.pathname); //返回当前页面的路径和文件名 console.log(window.location.port); //返回 web 主机的端口 console.log(window.location.protocol); //返回所使用的 web 协议（http: 或 https:） console.log(window.location.href); //返回当前页面的 URL 地址
2、
window.location.replace(‘URL’); //通过 location.replace 替换当前页面路径来实现页面跳转 window.location.assign(‘URL’); //通过 location.assign 加载新文档实现页面跳转 window.location.href = ‘URL’; //通过改变 location.href 来实现页面跳转 常用
3、跳转传参
在JavaScript中，可以使用location.href来实现页面跳转，同时可以通过在URL中传递参数来进行数据传递。以下是一个示例：
// 跳转到目标页面，并传递参数 let parameter = "Hello World"; let url = "target.html?param=" + encodeURIComponent(parameter); location.href = url;
在目标页面(target.html)中，可以通过解析URL参数来获取传递的参数值。示例代码如下：
// 获取URL参数 function getParameterByName(name) { name = name.replace(/[ ]/g, "\\$&"); var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), results = regex.exec(window.location.hash); if (!results) results = regex.exec(window.location.search); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, " ")); } // 获取传递的参数值 let paramValue = getParameterByName("param"); console.log(paramValue); // 输出: "Hello World"
在上述示例中，encodeURIComponent函数用于对参数进行编码，以防止URL中的特殊字符引起错误。getParameterByName函数用于解析URL参数，并返回指定参数名的值。
请注意，这只是一种简单的传参方法，适用于在不需要隐藏传递参数的情况下。如果需要对传递的数据进行加密或隐藏，请考虑使用其他方法，如使用服务器端技术进行数据传递。
