HTML 前端学习（7）—— JavaScript 学习之 BOM 操作

世界的隐喻

已于 2022-04-30 13:35:37 修改

阅读量680

点赞数 1

分类专栏： HTML 前端开发学习文章标签： javascript 前端 html 学习 HTML

于 2022-04-30 13:34:39 首次发布

本文链接：https://blog.csdn.net/shijiedeyinyu/article/details/124511634

版权

HTML 前端开发学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的BOM（浏览器对象模型）操作，包括获取页面高度和宽度、打开和关闭窗口、使用history和location对象导航、以及各种弹框（警告、确认、提示）的使用。此外，还涉及了计时器的设置与清除，为开发者提供了全面的JavaScript页面交互基础知识。

摘要由CSDN通过智能技术生成

BOM 操作简介

BOM 操作
    浏览器对象模型 Browser Object Model
       利用 JS 代码操作浏览器

当前页面操作

当前页面高度和宽度

window.innerWidth; // 982
window.innerHeight; // 722

打开网站

// 打开一个网站,第二个参数为空即可，第三个参数写窗口的大小和位置
window.open("http://www.baidu.com","","height=800px width=400px");

关闭当前页面

window.close();

window 子对象

window.navigator.appName; // 当前浏览器位置
window.navigator.userAgent; // 当前是否是一个浏览器
window.navigator.appVersion; // 当前浏览器版本
window.navigator.platform; // 当前使用的平台，如：win32

history 对象

window.history.back(); // 后退到上一页
window.history.forward(); // 前进到下一页

location 对象

window.location; // 获取对象
window.location.href; // 当前网址
window.location.href = "http://www.baidu.com"; // 赋值并跳转网址
window.location.reload(); // 刷新网页

弹框

警告框

alert("asd");

请添加图片描述

确认框

confirm(123);

请添加图片描述

提示框

prompt("给我康康", "奥特曼");

什么都不输入：
请添加图片描述
输入 aoteman ：

计时器相关

过几秒触发

	function fun1() {
        alter("三秒后触发");
    }
    setTimeout(fun1, 3000);
    // 如果要清除定时任务
    // let t = setTimeout(fun1, 3000);
    // clearTimeout(t);

每过一段时间循环触发

	function fun2() {
        alert("奥特曼");
    }
    // setInterval(func2, 3000);
    // 在九秒时间内每三秒重复弹出警告框
    function fun3() {
        let t = setInterval(fun2, 3000);
        function inner() {
            clearInterval(t);
        }
        setTimeout(inner, 9000);
    }
    fun3();