BOM 浏览器对象模型

BOM 浏览器对象模型

浏览器对象模型（Browser Object Model），简称 BOM，表示由浏览器（主机环境）提供的用于处理文档（document）之外的所有内容的其他对象

• window 浏览器实例
• location 加载文档的信息和常用导航功能实例
• navigator 客户端标识和信息的对象实例
• history 当前窗口建立以来的导航历史记录
• screen 客户端窗口及屏幕信息

1. window 对象

window 对象是 BOM 的核心，是 js 访问浏览器的接口，也是 ES 规定的 Global 全局对象

1-1 window.open 弹窗

window.open(url, name, params)

• url：要在新窗口中加载的 URL
• name：新窗口的名称
• params：新窗口的配置字符串
  • 新窗口位置:
    • left/top（数字）—— 屏幕上窗口的左上角的坐标。这有一个限制：不能将新窗口置于屏幕外（offscreen）
    • width/height（数字）—— 新窗口的宽度和高度。宽度/高度的最小值是有限制的，因此不可能创建一个不可见的窗口
  • 新窗口功能：
    • menubar（yes/no）—— 显示或隐藏新窗口的浏览器菜单
    • toolbar（yes/no）—— 显示或隐藏新窗口的浏览器导航栏（后退，前进，重新加载等）
    • location（yes/no）—— 显示或隐藏新窗口的 URL 字段。Firefox 和 IE 浏览器不允许默认隐藏它
    • status（yes/no）—— 显示或隐藏状态栏。同样，大多数浏览器都强制显示它
    • resizable（yes/no）—— 允许禁用新窗口大小调整。不建议使用
    • scrollbars（yes/no）—— 允许禁用新窗口的滚动条。不建议使用

<button class="btn">创建弹窗</button>
<script>    
    // 创建一个弹窗
    let options = `scrollbars=no,
    resizable=no,
    status=no,
    location=no,
    toolbar=no,
    menubar=no,
    width=500,
    height=300,
    left=200,
    top=200`;
    let btn1 = document.querySelector('.btn');
    btn1.addEventListener('click',function() {
     
        window.open('/', 'test', options);
    })
</script>

设置中的省略规则：

• 如果 open 调用中没有第三个参数，或者它是空的，则使用默认的窗口参数
• 如果这里有一个参数字符串，但是某些 yes/no 功能被省略了，那么被省略的功能则被默认值为 no。因此，如果你指定参数，请确保将所有必需的功能明确设置为 yes
• 如果参数中没有 left/top，那么浏览器会尝试在最后打开的窗口附近打开一个新窗口
• 如果没有 width/height，那么新窗口的大小将与上次打开的窗口大小相同

1-2 阻止弹窗

如果弹窗是在用户触发的事件处理程序（如 onclick）之外调用的，大多数浏览器都会阻止此类弹窗

// 弹窗被阻止
window.open('https://www.baidu.com');

// 弹窗被允许
button.onclick = () => {
   
  window.open('https://www.baidu.com');
};

1-3 弹窗与窗口访问

只有在窗口是同源的时，窗口才能自由访问彼此的内容

弹窗也可以使用 window.opener 来访问 opener 窗口，对其他所有窗口来说，window.opener 均为 null

<!-- 父窗口 -->
<button class="btn">打开窗口</button>
<script>
    // 创建窗口
    let btn = document.querySelector('.btn');
    let html = `<h3 style="text-align:center;color: #3496db;">Hello World</h3>`

    btn.addEventListener('click', function (e) {
     
        let newWindow = window.open('/05-JavaScript/26-BOM/05-新窗口.html', 'test', `width=500,height=400`);
        console.log(newWindow.location.href);
        setTimeout(() => {
     
            if (newWindow.location.href === 'about:blank') {
     
                return false;
            } else {
     
                newWindow.document.body.insertAdjacentHTML('afterbegin', html);
            }
        }, 100)
    })

</script>

<!-- 子窗口 -->
<h3>新窗口</h3>
<button class="btn">发送信息</button>

<script>
    let btn = document.querySelector('.btn');
    let html = `<h3 style="text-align:center;color: #3496db;">Hello window</h3>`
    btn.addEventListener('click', function (e) {
     
        window.opener.document.body.insertAdjacentHTML('afterbegin', html)
    })
</script>

1-4 关闭窗口

• window.close()：关闭一个弹窗
• window.close：检查一个窗口是否被关闭

close() 方法可用于任何 window，但是如果 window 不是通过 window.open() 创建的，那么大多数浏览器都会忽略 window.close()。因此，close() 只对弹窗起作用

如果窗口被关闭了，那么 closed 属性则为 true

<button class="btn">打开弹窗</button>
<button class="btn">关闭弹窗</button>
<button class="btn">检测弹窗</button>

<script>
    // window.close() 关闭window.open创建的弹窗
    let btn = document.querySelector('.btn');
    let newWindow;
    btn.addEventListener('click', function (e) {
     
        newWindow = window.open('/05-JavaScript/26-BOM/05-新窗口.html', <