javascript中BOM核心对象以及常用方法

最新推荐文章于 2023-12-28 16:03:47 发布

原创最新推荐文章于 2023-12-28 16:03:47 发布 · 2.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #BOM核心对象

本文介绍了Browser Object Model (BOM)的基本概念及其在浏览器环境中的应用，包括核心对象如history、location、navigator等的功能与使用方法，并通过实例演示了如何操作窗口、获取浏览器及屏幕信息。

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

1.BOM是Browser Object Model的缩写，简称浏览器对象模型
2.BOM的核心对象都挂在window上，有document frames history location navigator screen
3.BOM缺乏标准，DOM标准是W3C，JavaScript标准是ECMA
4.history对象浏览器历史记录
back()加载历史记录中的前一个页面
forward()加载历史记录中的下一个页面
go(number)加载指定页面
5.location对象用于获取当前页面的url以及转到新的页面,获取页面相关信息
location.herf = 'url地址'
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.portocol 返回页面使用的web协议。 http:或https:
6.navigator对象可以获取浏览器的相关信息如版本内核判断浏览器
userAgent是最常用的属性，用来完成浏览器判断
7.screen对象获取用户屏幕信息如宽高，是屏幕的宽高不是浏览器的窗口大小
8.window对象上常用方法
alert() setInterval(fn,时间) setTimeout(fn,时间) clearInter(fn) prompt() open() close()

reszieBy() reszieTo() scrollBy() scrollTo() scrollX scrollY

9.测试代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

<button id="btn">提交</button>

<button id="btnopen">新建窗口</button>

<button id="btnresize">调整窗口大小</button>

<script>

    var btn = document.getElementById('btn');

    btn.onclick = function(){

        //console.log(1);

        //console.log(navigator);

        //console.log(history);
    
        //history.back();

        //history.forward();

        //history.go(2);

        //close();

        //console.log(location.href);

        //location.href = 'https://blog.youkuaiyun.com/i10630226/article/details/45485915';

        //console.log(location.hostname);

        //console.log(screen);

        //scrollBy(0,100)

        //prompt();

        scrollTo(0,100);

    };

</script>

<script>

    var w;

    var btnopen = document.getElementById('btnopen');

    var btnresize = document.getElementById('btnresize');

    btnopen.onclick = function(){

    w = window.open('http://www.runoob.com/jsref/met-win-open.html','','width=300,height=300');

        w.focus();

    }

    btnresize.onclick = function(){

    w.resizeTo(500,500);

    w.focus();

}

</script>

</body>

</html>