javascript BOM

最新推荐文章于 2025-06-10 17:56:29 发布

LDH-

最新推荐文章于 2025-06-10 17:56:29 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript BOM BOM

本文链接：https://blog.youkuaiyun.com/weixin_38362146/article/details/78025570

js 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了浏览器对象模型(BOM)中Window对象的各种属性和方法，包括如何使用这些功能来控制浏览器窗口、获取屏幕尺寸、操作URL以及利用cookie保存用户信息等。

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

常用对象

概念：BOM ：Browser Object Model

常用对象：

Window：窗口，浏览器的窗口

我们定义的全局变量和全局函数都是window对象的属性和方法。

var a = 1;
function test(){
    var a = 2;
    alert(a);
    alert(window.a)
}

全局变量是window的属性，全局函数时window的方法。

浏览器body的宽度：window.innerWidth

浏览器body的高度：window.innerHeight

常用的方法：

Open：打开一个新的窗口。要传三个参数：第一个为将要打开窗口的路径；第二个为打开的方式；第三个对于新

打开窗口的描述（宽和高等）。

var myWindow = window.open("http://www.baidu.com","_blank","width=400,height=300")

Close：关闭一个窗口。

myWindow.close();

MoveTo:移动一个窗口。以窗口的左上角为坐标起点。

function removeWin(){
    //一个窗口的左上角为移动窗口的坐标
    myWindow.moveTo(200,200);
    myWindow.focus();
}

Focus：使窗口获得焦点。

resizeTo：改变窗口的大小。

function resizeWin(){
    myWindow.resizeTo(600,700);
    myWindow.focus();
}

Screen：屏幕也是window下面的一个对象，在使用的时候可以用window.screen，也可以把window省略掉。

屏幕常用的属性：宽，高；可用宽和可用高（可用高不包括任务栏）

var scrWidth = window.screen.width;
var scrHeight = screen.height;
document.write("屏幕的宽为:"+scrWidth +"屏幕的高为:"+scrHeight+"<br>");
var scrAvaWidth = screen.availWidth;
var scrAvaHeight = screen.availHeight;
document.write("屏幕的宽为："+scrAvaWidth + "屏幕的高为："+ scrAvaHeight);

Location：地址

常用属性：href:完整路径 port:端口号 pathname:路径名protocol:协议

var scrWidth = window.screen.width;
var scrHeight = screen.height;
document.write("屏幕的宽为:"+scrWidth +"屏幕的高为:"+scrHeight+"<br>");
var scrAvaWidth = screen.availWidth;
var scrAvaHeight = screen.availHeight;
document.write("屏幕的宽为："+scrAvaWidth + "屏幕的高为："+ scrAvaHeight);

常用方法：

打开一个新的路径（窗口）

location.assign("http://www.runoob.com");

刷新：普通刷新和强制刷新

function reLoadDoc(){
    location.reload();//如果传值为true，那么就是强制刷新
}

History：历史记录

记录当前的窗口的历史，可以进行页面的转换。

back:返回上一页

forward：进入下一页

go: 进入确定的哪一页（-1时返回上一个页面）

<body>
    <button onclick="goBack()">返回上一页</button>
    <button onclick="goForward()">进入下一页</button>
    <button onclick="newDoc()">新的页面</button>
    <button onclick="goTo()">进去确定的页面</button>
</body>
<script>
    function goBack(){
        history.back();
    }
    function goForward(){
        history.forward();
    }
    function newDoc(){
        location.assign("http://www.runoob.com")
    }
    function goTo(){
        history.go(-1);
    }
</script>

弹窗

alert():警告提示框。也是window对象下的方法window可以省略不写。

alert("提示的内容");//警告提示框

prompt（“提示的信息”，“默认值”）：信息提示输入框。也是window对象下的方法，window也可以省略不写

var str = prompt("请输入内容","hello world");//请输入内容就是提示的信息，后面的hello world是默认值。

confirm（“提示的信息”）：确认框。也是window对象下的方法，window也可以省略不写。当点击确定的时候，它的返回值是true，如果点取消，返回false。

var timer = setInterval("getTime()",1000);
function getTime(){
    var date = new Date();
    var hours = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();
    var s =  hours + ":"+ minute + ":" + second;
    var p1 = document.getElementById("p1");
    p1.innerHTML = s;
}

cookie的作用：在本地浏览器储存数据，常用于记住账号

cookie的组成：

键值对的形势

储存的数据：”uesrId=12345;psd=123;”

有效期：”expires=今天以后的时间”

存储cookie：

按照cookie的格式写好一个字符串然后将她赋值给document.cookie，浏览器就存了这个cookie。可以存储多个键

值对，但是键的名字不能重复。

var timer = setInterval("getTime()",1000);
function getTime(){
    var date = new Date();
    var hours = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();
    var s =  hours + ":"+ minute + ":" + second;
    var p1 = document.getElementById("p1");
    p1.innerHTML = s;
}

获取cookie：

通过document.cookie就能得到浏览器之前存储的cookie，是个字符串。将这个字符串进行解析，得到自己想要的

内容。

var timer = setInterval("getTime()",1000);
function getTime(){
    var date = new Date();
    var hours = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();
    var s =  hours + ":"+ minute + ":" + second;
    var p1 = document.getElementById("p1");
    p1.innerHTML = s;
}

清除cookie：

将你存储的cookie的有效期改为过去的某一天，就清除了cookie

var timer = setInterval("getTime()",1000);
function getTime(){
    var date = new Date();
    var hours = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();
    var s =  hours + ":"+ minute + ":" + second;
    var p1 = document.getElementById("p1");
    p1.innerHTML = s;
}

计时事件

setInterval(“函数”，”毫秒数”)：计时器，就是每隔多长时间就调用一次函数。例如时钟的演示：

var timer = setInterval("getTime()",1000);
function getTime(){
    var date = new Date();
    var hours = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();
    var s =  hours + ":"+ minute + ":" + second;
    var p1 = document.getElementById("p1");
    p1.innerHTML = s;
}

clearInterval(计时器)：停止一个计时器。

clearInterval(timer);

setTimeout(“函数”,”毫秒数”)：延时器，就是隔了多少时间后调用一次函数。

<body>
    <button onclick="goBack()">返回上一页</button>
    <button onclick="goForward()">进入下一页</button>
    <button onclick="newDoc()">新的页面</button>
    <button onclick="goTo()">进去确定的页面</button>
</body>
<script>
    function goBack(){
        history.back();
    }
    function goForward(){
        history.forward();
    }
    function newDoc(){
        location.assign("http://www.runoob.com")
    }
    function goTo(){
        history.go(-1);
    }
</script>