JavaScript BOM操作

最新推荐文章于 2025-02-05 15:30:50 发布

LinWoW

最新推荐文章于 2025-02-05 15:30:50 发布

阅读量657

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： JavaScript bom

本文链接：https://blog.youkuaiyun.com/linwow/article/details/90758964

前端专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了JavaScript的BOM（浏览器对象模型），包括Window对象的属性和方法，如window.innerWidth、window.open()等；Screen对象，如screen.availWidth；Location对象，如location.hostname；History对象，如history.back()；Navigator对象，如navigator.userAgent；以及JavaScript的弹窗功能（警告、确认、提示对话框）和计时事件（setInterval、setTimeout、clearInterval、clearTimeout）。

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

文章目录

- BOM

BOM

BOM(浏览器对象模式)让JavaScript可以与浏览器进行对话，BOM主要用于管理窗口与窗口之间的通讯，其核心对象是window。

Window的子对象主要有如下几个：

JavaScript document 对象
JavaScript frames 对象
JavaScript history 对象
JavaScript location 对象
JavaScript navigator 对象
JavaScript screen 对象

Window 对象

Window 对象表示浏览器中打开的窗口。window对象是js中的顶级对象，所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法，在调用的时候可以省略window。

document.getElementById("d1");  
相当于：
window.document.getElementById("d1");

Window对象的常用属性和方法

window.innerHeight：浏览器窗口的内部高度
Window.innerWidth：浏览器窗口的内部宽度

显示浏览器窗口的高度和宽度：要注意的是这里的宽度和高度不包括工具栏、滚动条

var w=window.innerWidth;
var h=window.innerHeight;
document.write("浏览器窗口宽度："+w+",高度："+h+"。");
输出：
"浏览器窗口宽度：681,高度：655。"

window.open()：打开新窗口

window.open(URL,name,...);
URL:打开指定的页面的URL。如果没有指定URL，打开与新的空白窗口
name:窗口名称
window.open("https://www.baidu.com","","width=200,height=100");

window.close()：关闭当前窗口
window.moveTo()：移动当前窗口

x=window.open("","","width=200,height=100");
x.window.moveTo(100,100);

window.resizeTo()：调整当前窗口的尺寸

x=window.open("","","width=200,height=100");
x.window.resizeTo(200,200);

Window Screen对象

window.screen 对象包含有关用户屏幕的信息，编写时可以不使用 window 这个前缀。

screen.availWidth：可用的屏幕宽度
screen.availHeight：可用的屏幕高度

screen.属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

document.write("可用高度: " + screen.availHeight);
document.write("可用宽度: " + screen.availWidth); 
输出：
可用高度: 768可用宽度: 1366

screen.height：返回屏幕的总高度
screen.width：返回屏幕的总宽度

document.write("总高度: " + screen.height);
document.write("总宽度: " + screen.width); 
输出：
总高度: 768总宽度: 1366

Window Location对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。这种方法既可以用于具有onclick事件的标签，也可以用于满足某些条件进行跳转，特点是方便且灵活。window.location对象在编写时可不使用 window 这个前缀。

location.hostname：返回 web 主机的域名
location.pathname：返回当前页面的路径和文件名
location.portL：返回web 主机的端口（80 或 443）
location.protocol：返回所使用的 web 协议（http:// 或 https://）

document.write(location.hostname); 
document.write(location.pathname); 
document.write(location.port); 
document.write(location.protocol);

location.assign()：方法加载新的文档。

<head> 
<script> 
function func(){ 
  window.location.assign("https://www.baidu.com") } 
</script> 
</head> 
<body> 
<input type="button" value="Load new document" onclick="func()"> 
</body>

Window History对象

window.history 对象包含浏览器的历史，编写时可不使用 window 这个前缀。

history.back()：与在浏览器点击后退按钮相同
history.forward()：与在浏览器中点击向前按钮向前相同
history.go()：接受一个整数作为参数，移动到该整数指定的页面，比如go(1)相当于forward()，go(-1)相当于back()。history.go(0)相当于刷新当前页面。

如果移动的位置超出了访问历史的边界，上面的三个方法并不报错，而是失败。

Window Navigator对象

window.navigator 对象包含有关访问者浏览器的信息，编写时可不使用 window 这个前缀。

navigator.appCodeName：返回浏览器的代码名
navigator.appName：返回浏览器的名称
navigator.appVersion：返回浏览器的平台和版本信息
navigator.cookieEnabled：返回指明浏览器中是否启用 cookie 的布尔值
navigator.platform：返回运行浏览器的操作系统平台
navigator.userAgent：返回由客户机发送服务器的user-agent 头部的值

JavaScript 弹窗

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

警告对话框

警告对话框是最常用的，它通常被用来给用户提示一些警告信息。比如，某个输入区域需要用户输入一些文本信息，但是用户并没有输入任何信息，那么为了使用户输入有效的信息，你可以利用警告对话框来提示警告信息，如下：

alert("Warning Message");

除了这个作用外，警告对话框也可以提示一些友好的信息。警告对话框仅仅值提供一个 “OK” 按钮供选择来继续执行。

确认对话框

确认对话框是最常用来获取用户对任何选项的赞成的观点。确认对话框会显示两个按钮：确定和取消。

如果用户点击了确认按钮，窗口函数 confirm() 的返回值为 true。如果用户点击了取消按钮，confirm() 函数返回值为 false。你可以像如下的方式使用确认对话框：

var retVal = confirm("你想继续吗 ?");
if( retVal == true ){
   alert("你选择了确定!");
}else{
   alert("你选择了取消!");
}
小提示：return只能包含在函数中，不然会报错。

提示对话框

当你想弹出一个文本框，并且得到用户的输入数据，提示框就可以实现这个功能。因此，这个框可以与用户进行交互。用户需要填写信息，然后点击 Ok按钮。

这种对话框通过调用 prompt() 函数来显示，给函数有两个形式参数 (i) 你想在框中显示的文本标签 (ii) 一个默认的显示在框中的字符串。

这种对话框提供两个按钮：确定和取消。如果用户点击确定按钮，窗口函数 prompt() 将会返回文本框中输入的值。如果用户点击 Cancel 按钮，窗口函数 prompt() 的返回值为 null。

你可以使用如下的方式来实现提示对话框：

var retVal = prompt("请输入你的名字 : ", "张三");
alert("你的名字是 : " +  retVal );

JavaScript 计时事件

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

setInterval()：间隔指定的毫秒数不停地执行指定的代码。
clearInterval()：方法用于停止 setInterval() 方法执行的函数代码。

setInterval() 第一个参数是函数（function），第二个参数间隔的毫秒数。

<script>
    function f1() {
        alert(123)
    }
    function clear(){
        let s = setInterval(f1,3000);
        function inner() {
            clearInterval(s)
        }
        setTimeout(inner,9000)
    }
    clear()
</script>

时钟实例：

<p id="demo"></p> 
<button onclick="myStopFunction()">Stop time</button> 

<script> 
var myVar=setInterval(function(){myTimer()},1000); 
function myTimer() 
{ 
var d=new Date(); 
var t=d.toLocaleTimeString(); 
document.getElementById("demo").innerHTML=t; 
} 
function myStopFunction() 
{ 
clearInterval(myVar); 
} 
</script>

setTimeout()：暂停指定的毫秒数后执行指定的代码。setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
clearTimeout()：方法用于停止执行setTimeout()方法的函数代码。

<script>
    function  func() {
        alert(123)
    }
    function demo(){
        let s = setTimeout(func,3000);
        function inner() {
            clearTimeout(s)
        }
        setTimeout(inner,2000)
    }
    demo()
</script>