JS BOM

Posted 2021-01-14 大张哥

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS BOM相关的知识，希望对你有一定的参考价值。

BOM

1、窗口操作 open

// 新tag打开目标地址
open("http://www.yahoo.com");
// 自身tag转跳目标地址
open("http://www.yahoo.com", ‘_self‘);
// 自定义窗口打开目标地址
open("http://www.yahoo.com", ‘_blank‘, ‘width=300, height=300‘);

2、历史记录 history

// 历史后退
history.back();
// 历史前进
history.forward()

3、导航器 navigator

// 拥有浏览器信息的字符串
navigator.userAgent;

4、地址信息 location

// 协议
location.protocol
// 服务器
location.hostname
// 端口号
location.port
// 参数拼接
location.search

JS BOM操作

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>BOM</title>
</head>
<body>
    <button class="b1">open</button>
    <button class="b2">前进</button>
    <button class="b3">浏览器信息</button>
</body>
<!-- open -->
<script type="text/javascript">
    var b1 = document.querySelector(‘.b1‘);
    b1.onclick = function () {
        // 新tag打开目标地址
        // window.open("http://www.yahoo.com");
        // 自身tag转跳目标地址
        // open("http://www.yahoo.com", ‘_self‘);
        // 自定义窗口打开目标地址
        open("http://www.yahoo.com", ‘_blank‘, ‘width=300, height=300‘);
    }
</script>
<script type="text/javascript">
    var b2 = document.querySelector(‘.b2‘);
    b2.onclick = function () {
        // 历史后退
        // history.back();
        // 历史前进
        history.forward();
        // history.go(num)
    }
</script>
<script type="text/javascript">
    var b3 = document.querySelector(‘.b3‘);
    b3.onclick = function () {
        console.log(navigator.userAgent);
        if (navigator.userAgent.match("Chrome")) {
            alert("谷歌浏览器")
        }
    }
</script>
<script type="text/javascript">
    // 协议
    console.log(location.protocol);
    // 服务器
    console.log(location.hostname);
    // 端口号
    console.log(location.port);
    // 参数拼接
    console.log(location.search);
</script>
</html>

以上是关于JS BOM的主要内容，如果未能解决你的问题，请参考以下文章

js bom中浏览器兼容问题判断代码

[JS-BOM]BOM_Location地址栏对象