BOM学习实用路线（1）——DOM简介及BOM下五大对象之Window对象

最新推荐文章于 2022-08-09 16:27:56 发布

溜_x_i_a_o_迪

最新推荐文章于 2022-08-09 16:27:56 发布

阅读量247

点赞数

分类专栏： Web前端原生JavaScript # JS-BOM 文章标签： js javascript bom 前端 html5

本文链接：https://blog.youkuaiyun.com/u013946061/article/details/105440216

版权

原生JavaScript 同时被 3 个专栏收录

34 篇文章

订阅专栏

Web前端

32 篇文章

订阅专栏

JS-BOM

7 篇文章

订阅专栏

本文深入探讨了浏览器对象模型(BOM)和文档对象模型(DOM)的基本概念，详细讲解了BOM下的window对象及其属性如innerWidth和innerHeight，以及window.open方法的使用，包括新窗口的地址、打开方式和规格等参数。

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

BOM

javascript 的组成部分

DOM (document object model) 文档对象模型
BOM (browers object model) 浏览器对象模型
ECMAScript js 的核心

BOM 下五大对象——window 对象

innerWidth/innerHeight

window.innerWidth 可视区宽度
window.innerHeight 可视区高度

console.log(window.innerWidth);
console.log(window.innerHeight);

在这里插入图片描述

open 方法

window.open(URL,target,specs,replace)

URL 新窗口地址
target 属性新窗口打开方式
- _blank
- _self
specs 新窗口规格
- width=pixels 窗口的宽度.最小.值为100
- height=pixels 窗口的高度。最小.值为100
- location=yes|no|1|0 是否显示地址字段.默认值是yes
- menubar=yes|no|1|0 是否显示菜单栏.默认值是yes
- resizable=yes|no|1|0 是否可调整窗口大小.默认值是yes
- scrollbars=yes|no|1|0 是否显示滚动条.默认值是yes
- status=yes|no|1|0 是否要添加一个状态栏.默认值是yes
- titlebar=yes|no|1|0 是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
- toolbar=yes|no|1|0 是否显示浏览器工具栏.默认值是yes

window.open()；创建一个新的浏览器窗口对象，如同使用文件菜单中的新窗口命令一样。如果没有指定参数，则一个新的窗口会被打开并且指定的资源会被加载进这个窗口的浏览器上下文中。

window.open(URL,target,specs,replace)
URL ：新窗口地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        {
            let btn = document.querySelector("#btn");
            btn.onclick = ()=>{
                window.open("http://www.baidu.com");
            };
        }
    </script>
</body>
</html>

在这里插入图片描述

window.open(URL,target,specs,replace)

URL 新窗口地址
target 属性新窗口打开方式
- _blank（默认参数：新窗口打开）
- _self （当前窗口打开）

let btn = document.querySelector("#btn");
btn.onclick = ()=>{
    window.open("http://www.baidu.com", "_self");
};

在这里插入图片描述

 let btn = document.querySelector("#btn");
 btn.onclick = ()=>{
     window.open("http://www.baidu.com", "_blank");
 };

在这里插入图片描述

window.open(URL,target,specs,replace)

URL 新窗口地址
target 属性新窗口打开方式
- _blank
- _self
specs 新窗口规格
- width=pixels 窗口的宽度.最小.值为100
- height=pixels 窗口的高度。最小.值为100
- location=yes|no|1|0 是否显示地址字段.默认值是yes
- menubar=yes|no|1|0 是否显示菜单栏.默认值是yes
- resizable=yes|no|1|0 是否可调整窗口大小.默认值是yes
- scrollbars=yes|no|1|0 是否显示滚动条.默认值是yes
- status=yes|no|1|0 是否要添加一个状态栏.默认值是yes
- titlebar=yes|no|1|0 是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
- toolbar=yes|no|1|0 是否显示浏览器工具栏.默认值是yes

　　注意specs 参数兼容性不好，有些属性没有作用

            let btn = document.querySelector("#btn");
            btn.onclick = ()=>{
                let win = window.open("http://www.baidu.com","_blank","width=200,height=200,menubar=yes,resizable = no,titlebar = no,left = 500,top = 500");
            };