JS浏览器BOM常见操作实例详解

JS浏览器BOM（Browser Object Model）是指浏览器对象模型，它提供了与浏览器窗口进行交互的API。BOM包含了window、navigator、document等对象，这些对象是直接映射到浏览器窗口的，可以通过JS编程来操作浏览器窗口。本文将详细讲解JS浏览器BOM常见操作实例，包括获取浏览器窗口尺寸、打开新窗口、关闭窗口等。

获取浏览器窗口尺寸

通过JS代码可以获取当前浏览器窗口的尺寸，包括窗口的宽度和高度。实现方法如下：

// 获取浏览器窗口的宽度和高度
var winWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var winHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

// 输出浏览器窗口尺寸
console.log("浏览器窗口宽度为：" + winWidth + "px");
console.log("浏览器窗口高度为：" + winHeight + "px");

上述代码中，我们使用了三个方法来获取浏览器窗口的宽度和高度，分别是window.innerWidth、document.documentElement.clientWidth和document.body.clientWidth，如果某个方法获取不到值，则使用下一个方法。最终，我们将获取到的窗口宽度和高度输出到控制台。

打开新窗口

JS代码可以打开一个新的浏览器窗口，可以指定窗口的大小、位置、标题等属性。实现方法如下：

// 打开一个指定大小的新窗口
var win = window.open("http://www.example.com", "example", "width=800,height=600,top=100,left=200");

// 设置新窗口的标题
win.document.title = "Example Website";

上述代码中，我们使用window.open()方法打开一个新的浏览器窗口，同时指定了窗口的大小、位置、标题等属性。窗口的URL为http://www.example.com，窗口名称为“example”，窗口宽度为800px，窗口高度为600px，窗口顶部位置为100px，窗口左侧位置为200px。然后，我们使用win.document.title方法给新窗口设置标题为“Example Website”。

关闭窗口

JS代码还可以关闭当前浏览器窗口或指定的窗口。实现方法如下：

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

// 关闭指定的窗口
// 需要先获取窗口句柄
var win = window.open("http://www.example.com", "example");
win.close();

上述代码中，我们使用window.close()方法来关闭当前浏览器窗口，使用win.close()方法来关闭指定的窗口，需要先获取窗口句柄。另外，关闭指定的窗口时，需先用window.open()方法打开窗口，并获取到窗口句柄，然后使用句柄调用close()方法来关闭窗口。

总结

本文详细介绍了JS浏览器BOM常见操作实例，包括获取浏览器窗口尺寸、打开新窗口、关闭窗口等。以上实例可以帮助我们更好地掌握JS浏览器BOM的使用方法，提高JS开发效率。