BOM的属性和方法

最新推荐文章于 2023-04-06 11:03:24 发布

原创最新推荐文章于 2023-04-06 11:03:24 发布 · 915 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bom #浏览器 #window #open

web前端笔记专栏收录该内容

19 篇文章

订阅专栏

本文介绍了BOM(Browser Object Model)的基本概念及其常用属性和方法。通过实例演示了如何使用open()方法打开新窗口及close()方法关闭窗口，并展示了如何获取浏览器信息，如判断是否为IE浏览器。同时，还介绍了如何获取当前页面URL的各种组成部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

BOM : Browser Object Model 浏览器对象模型。
其实我们经常写的window对象就是浏览器的一个对象，下面通过一些例子了解BOM常见的属性和方法。
1.窗口的打开（open()）和关闭(close()):
这两个方法有兼容性的问题，在不同的浏览器下表现不同
例一：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() {
    var aInput = document.getElementsByTagName('input');
    var opener = null;
    aInput[0].onclick = function() {
        //open(地址默认是空白页面，打开方式默认新窗口) 打开一个新窗口
        //window.open('http://www.baidu.com', '_self');

        opener = window.open();//返回值 返回的新开页面的window对象

        //alert(opener == window)

        //opener.document.body.style.background = 'red';

    }

    aInput[1].onclick = function() {

        window.close();
        /*
        ff : 无法关闭
        chrome : 直接关闭
        ie : 询问用户
        */

    }

    aInput[2].onclick = function() {
        opener.close(); //可以通过关闭用window.open方法打开的窗口
    }
}
</script>
</head>

<body>
    <input type="button" value="打开新窗口" />
    <input type="button" value="关闭窗口" />
    <input type="button" value="关闭新窗口" />
</body>
</html>

2.浏览器信息window.navigator.userAgent：
window.navigator.userAgent会返回浏览器的一些基本信息：包括浏览器的内核，版本等，我们可以利用这些信息对不同的浏览器做不同的事情。
这里写图片描述
例二：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
//window.navigator.userAgent : 浏览器信息
alert( window.navigator.userAgent )

if ( window.navigator.userAgent.indexOf('MSIE') != -1 ) {
    alert('我是ie');
} else {
    alert('我不是ie');
}
</script>
</head>
<body>
</body>
</html>