第九篇-Javascript BOM - 上

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参数，并返回指定参数名的值。

请注意，这只是一种简单的传参方法，适用于在不需要隐藏传递参数的情况下。如果需要对传递的数据进行加密或隐藏，请考虑使用其他方法，如使用服务器端技术进行数据传递。