【JavaScript】10-js操作bom

最新推荐文章于 2025-11-24 03:12:01 发布

原创最新推荐文章于 2025-11-24 03:12:01 发布 · 246 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

JS教程专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了JavaScript中与浏览器对象模型(BOM)相关的操作，包括window对象的历史(history)、位置(location)子对象以及一些内置函数。通过示例展示了如何使用forward()、back()、reload()、href跳转、prompt()、alert()、confirm()、open()、close()、setTimeout()和setInterval()等方法，帮助开发者更好地理解和控制浏览器行为。

10-js操作bom

bom-Browser Object Model(浏览器对象模型)

bom的顶级对象是window对象

1.history子对象

//可以通过打印history对象确定history有哪些属性和方法
console.log(window.history);

//前进函数
function my_forward() {
    window.history.forward();//相当于浏览器自带的前进按钮
}

//后退函数
function my_back() {
    window.histroy.back();//相当于浏览器自带的后退按钮
}

//通过go()函数也可以实现
function my_forward() {
    window.history.go(1);//正数代表前进一个页面，负数代表后退一个页面
}

2.location子对象

//重新加载函数
function my_reload() {
    window.location.reload();//刷新本页面
}

//跳转页面函数
function set_href(url) {
    window.location.href = url;
}

3.window对象自带的函数

//打开提示框函数 
function open_prompt() {
    let result = window.prompt("请输入用户名：");
    console.log(result);
}

//打开警告框函数
function open_alert() {
    window.alert("这是一条警告！");
}

//打开确认框函数
function open_confirm() {
    let result = window.confirm("王子玉是女生吗？");
    console.log(result);//确定是true，取消是false；
}

//打开新窗口函数
function open_window() {
    window.open("history_demo.html", "这是新窗口", "width=300px,height=300px,left=100px,top=100px,scrollbars=0");
}

//关闭窗口的函数
function my_close() {
    window.close();
}

4.window对象的两个定时函数

//设置定时任务
window.setTimeout(function() {
    console.log("定时任务执行了！")
}, 3000);

//定时函数执行时只填写函数名传不了参数
window.setTimeout(open_window, 5000);

//推荐使用的写法
window.setTimeout(function() {
    open_window();
}, 5000);

//设置周期任务
let i = 1;
let interval_name = window.setInterval(function() {
    console.log(`周期任务执行${i++}次`);
},1000);//这里设置名字是为了方便关闭

//关闭周期任务
function close_interval() {
    window.clearInterval(interval_name);
    interval_name = null;
}

//开启周期任务
function open_interval() {
    if(interval_name == null) {//防止用户多次点击
    interval_name = window.setInterval(function() {
        console.log(`周期任务执行${i++}次！`)
    },1000);
}