木叶清风,C++,Python,Java,C#,Unity3d,Unreal4,UE4,技术日志

# BOM相关

BOM（Browser Object Model）是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。使用BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。

BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：

  • 弹出新的浏览器窗口
  • 移动、关闭浏览器窗口以及调整窗口大小
  • 提供 Web 浏览器详细信息的定位对象
  • 提供用户屏幕分辨率详细信息的屏幕对象
  • 对 cookie 的支持
  • IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象

由于没有相关的 BOM 标准，每种浏览器都有自己的 BOM 实现。有一些事实上的标准，如具有一个窗口对象和一个导航对象，不过每种浏览器可以为这些对象或其他对象定义自己的属性和方法。

BOM具有以下几个对象：

BOM

  • window对象，表示整个浏览器窗口，主要用来操作浏览器窗口。同时，window对象还是 ECMAScript 中的 Global 对象，因而所有全局变量和函数都是它的属性，且所有原生的构造函数及其他函数也都存在于它的命名空间下。

    • 弹窗类相关方法：

      • alert('提示信息')
      • confirm("确认信息")
      • prompt("弹出输入框")
      • open("url地址"，“_black或_self”，“新窗口的大小”）
      • close() 关闭当前的网页
      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>

</head>

<body>
    <input id="openBtn" type="button" value="打开窗口">
    <input id="closeBtn" type="button" value="关闭窗口">
</body>
<script>
    alert("hello window");
    window.alert("hello window2")

    //确认框
    var flag = confirm("您确定要退出吗？");

    if (flag) {
        //退出操作
        alert("欢迎再次光临！");
    } else {
        //提示：手别抖...
        alert("再看一会吧！");
    }

    //输入框
    var result = prompt("请输入用户名");
    alert(result);

    //打开新窗口
    var openBtn = document.getElementById("openBtn");
    var newWindow;
    openBtn.onclick = function () {
        //打开新窗口
        newWindow = open("https://www.baidu.com");
    }

    //关闭新窗口
    var closeBtn = document.getElementById("closeBtn");
    closeBtn.onclick = function () {
        // 关闭新窗口
        newWindow.close();
    }
</script>

</html>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49

    • 定时器相关方法：

      • setTimeout(函数，时间) 只执行一次
      • clearTimeout(定时器名称) 清除定时器，用于停止执行setTimeout()方法的函数代码。
      • setInterval(函数，时间) 无限执行
      • clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>

</head>

<body>
</body>
<script>
    //一次性定时器
    setTimeout("console.log('once in line!')", 2000);

    function fun() {
        console.log("once!");
    }
    var id = setTimeout(fun, 2000);
    //clearTimeout(id);

    function fun2() {
        console.log("every time!");
    }
    //循环定时器
    var id = setInterval(fun2, 2000);
    //clearInterval(id);
</script>

</html>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30

      使用该定时功能可以做一个定时器：

  • document对象，是window对象的一个属性，可以用来处理页面文档。

    • JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookies。document.cookie 将以字符串的方式返回所有的 cookies，类型格式： cookie1=value; cookie2=value; cookie3=value;

  • location对象，用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

    • location对象：
      • location.herf = 'url地址'
      • location.hostname 返回 web 主机的域名
      • location.pathname 返回当前页面的路径和文件名
      • location.port 返回 web 主机的端口 （80 或 443）
      • location.portocol 返回页面使用的web协议。http或https

    可以使用location来跳转页面：

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

<head>
    <meta charset="UTF-8">
    <title></title>

</head>

<body>
    <input type="button" id="btn" value="刷新">

    <input type="button" id="goBaidu" value="跳转百度">
    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            location.reload();
        }


        var href = location.href;
        var goItcast = document.getElementById("goBaidu");
        goItcast.onclick = function () {
            location.href = "https://www.baidu.com";
        }

    </script>
</body>

</html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30

  • navigator对象，提供了与浏览器有关的信息，userAgent是最常用的属性，用来完成浏览器判断。

  • screen对象，用来获取用户的屏幕信息。

    • height: 获取整个屏幕的高。
    • width : 获取整个屏幕的宽。
    • availHeight: 整个屏幕的高减去系统部件的高（ 可用的屏幕宽度 ）
    • availWidth : 整个屏幕的宽减去系统部件的宽（可用的屏幕高度 ）
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #test1 {
            margin-left: 200px;
            height: 200px;
            width: 400px;
            background-color: red;
        }
    </style>

</head>

<body>
    你好，测试一下屏幕宽度
    <div id="test1">

    </div>


    <script>

        var test1 = document.getElementById("test1");
        console.log("网页可见区域 左边：" + document.body.offsetLeft + " 上边：" + document.body.offsetTop + " 宽：" + document.body.clientWidth + " 高：" + document.body.clientHeight);
        console.log("被卷去的高：" + document.body.scrollTop + " 被卷曲的左：" + document.body.scrollTop);
        console.log("网页正文部分 左边：" + window.screenLeft + " 上边：" + window.screenTop + " 宽：" + window.screen.width + " 高：" + window.screen.height);
        console.log("屏幕可用工作区 高度：" + window.screen.availHeight + " 宽度：" + window.screen.availWidth);

        var loc = test1.getBoundingClientRect();
        console.log(loc.left + ":" + loc.top);

    </script>
</body>

</html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39

  • history对象，包含浏览器的历史。

    • back() 返回上一页。
    • forward() 返回下一页。
    • go(“参数”) -1表示上一页，1表示下一页。
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>

</head>

<body>
    <input type="button" id="btn" value="获取历史记录个数">
    <a href="http://www.baidu.com">百度</a>
    <input type="button" id="forward" value="前进">
    <script>

        //1.获取按钮
        var btn = document.getElementById("btn");
        //2.绑定单机事件
        btn.onclick = function () {
            //3.获取当前窗口历史记录个数
            var length = history.length;
            alert(length);
        }


        //1.获取按钮
        var forward = document.getElementById("forward");
        //2.绑定单机事件
        forward.onclick = function () {
            // history.forward();
            history.go(1);
        }

    </script>
</body>

</html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37

← Javascript基础6-DOM相关 →