JavaScript之BOM使用

cloudOnSkyline

已于 2022-06-26 14:33:53 修改

阅读量150

点赞数

分类专栏： JavaScript 文章标签： javascript

于 2022-06-23 15:02:34 首次发布

本文链接：https://blog.csdn.net/weixin_44827643/article/details/125426952

版权

JavaScript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

本文主要介绍BOM(浏览器对象模型:Browser Object Model)的使用，分别介绍窗口对象、屏幕对象、位置对象、历史对象、浏览器对象以及弹出框。

1.窗口对象：指的是浏览器窗口，大小可调整。通过innerWidth和innerHeight可分别获取窗口的宽高。onresize可绑定窗口尺寸变化时的事件。另外，利用window.close()方法可关闭当前窗口，利用window.open()可打开指定页面。

2.屏幕对象：可获取用户所用屏幕的相关信息，为固定值:包括屏幕的宽高、可用宽高、颜色深度以及像素深度。

3.位置对象：可获取当前页面的相关位置信息，包括页面地址、页面路径以及所使用Web协议。window.location.assign()与window.open()的功能类似，可加载新文档。下面介绍如何实现页面的跳转，具体方法有多种，如下所示：

（1）window.location.assign():设置一个参数，打开指定的页面

（2）window.open():设置三个参数：页面地址，何种窗口打开及窗口的属性设置

（3）window.location.href:直接修改此属性的值进行跳转

（4）document.location:直接修改值进行跳转

  <script>
        1
        window.location.href = 'http://www.qq.com';
        2
        window.open('http://www.taobao.com', '_blank', 'width=200px,height=300px');
        3
        document.location = "http://www.baidu.com"
        4
        window.location.assign('http://www.qq.com')
    </script>

4.历史对象：主要包含两种方法的使用，window.history.forward()和window.history.back().两种方法的功能等同于浏览器自带的前进和后退按钮。

5.浏览器对象：主要包含浏览器的相关信息，包括应用程序名称、版本信息等。

6.弹出框：包括警示框(alert())、确认框(confirm())和提示框(prompt())三种。

演示代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        button:first-child {
            margin-right: 50px;
        }
    </style>

</head>

<body>
    <button onclick="window.history.forward()">前进</button><button onclick="window.history.back()">后退</button>
    <div><a href="http://baidu.com" target="_self">百度</a> <a href="http://taobao.com" target="_self">淘宝</a></div>
    <script>
        // 1.窗口对象:指浏览器窗口，可调整大小
        /*   window.onresize = function() {
              console.log(window.innerHeight);
              console.log(window.innerWidth);
          };
          var a = prompt('输入6，即可关闭窗口') * 1;
          if (a == 6) {
              window.close();
          } else {
              window.open('./案例-开关灯.html');

          } */
        //2.屏幕对象：指用户的屏幕，固定值
        // width和height就是屏幕实际的宽度和高度
        console.log('本计算机的屏幕宽度：' + window.screen.width);
        console.log('本计算机的屏幕高度：' + window.screen.height);
        // availWidth和availHeight指的是减去工具条之类所剩的可利用宽高
        console.log('本计算机的可利用屏幕宽度：' + window.screen.availWidth);
        console.log('本计算机的可利用屏幕高度：' + window.screen.availHeight);
        // colorDepth（指计算机以几位显示一种颜色,1字节=8比特，1比特等于1位）
        console.log('本计算机的屏幕颜色深度：' + window.screen.colorDepth);
        // pixelDepth(像素深度：指存储每个像素所用的位数)
        console.log('本计算机的屏幕像素深度：' + window.screen.pixelDepth);
        // 3、位置对象：
        console.log("当前页面的地址：" + window.location.href);
        console.log("当前页面的路径：" + window.location.pathname);
        console.log("使用的Web协议：" + window.location.protocol);
        // 加载新文档
        // console.log(window.location.assign('./案例-随机更换背景颜色.html'));
        // 4.历史对象
        // window.history.forward()和window.history.back()等同于浏览器上的前进后退按钮
        // 5.浏览器对象:获取浏览器的一些信息

        console.log(window.navigator.appName); //Netscape
        // "Netscape" 是 IE11、Chrome、Firefox 以及 Safari 的应用程序名称的统称。
        console.log(window.navigator.appCodeName); //Mozilla
        // "Mozilla" 是 Chrome、Firefox、IE、Safari 以及 Opera 的应用程序代码名称。
        console.log(window.navigator.product); //浏览器引擎的产品名称
        console.log(window.navigator.appVersion); //有关浏览器的版本信息
        console.log(window.navigator.userAgent); //由浏览器发送到服务器的用户代理报头
        console.log(window.navigator.platform); //返回浏览器平台
        console.log(window.navigator.language); //返回浏览器语言
        console.log(window.navigator.onLine); //浏览器是否在线
        console.log(window.navigator.javaEnabled()); //java是否启用
        // 6.JS弹出框
        window.alert('警告框') //警告框
        if (window.confirm('你确定退出吗？')) {
            alert('退出')
        } else {
            alert('未退出')
        } //确认框
        var v = window.prompt('请输入一个数：') * 1;
        alert(v + '\n折行'); //提示框
    </script>
</body>

</html>

cloudOnSkyline

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之BOM使用

本文主要介绍BOM(浏览器对象模型:Browser Object Model)的使用，分别介绍窗口对象、屏幕对象、位置对象、历史对象、浏览器对象以及弹出框。 1.窗口对象：指的是浏览器窗口，大小可调整。通过innerWidth和innerHeight可分别获取窗口的宽高。onresize可绑定窗口尺寸变化时的事件。另外，利用window.close()方法可关闭当前窗口，利用window.open()可打开指定页面。2.屏幕对象：可获取用户所用屏幕的相关信息，为固定值:包括屏幕的宽高、可用宽高、颜色深度以及
复制链接

扫一扫