浏览器对象模型 (BOM)

最新推荐文章于 2024-08-01 15:08:18 发布

h294590501

最新推荐文章于 2024-08-01 15:08:18 发布

阅读量1.1k

点赞数

分类专栏：前端基础文章标签：浏览器对象模型 (BOM)

本文链接：https://blog.csdn.net/h294590501/article/details/80517979

版权

前端基础专栏收录该内容

13 篇文章 1 订阅

订阅专栏

浏览器对象模型 (BOM)

//BOM常用的对象
// Window ，封装了浏览器整个窗口对象
// Navigator ，封装了浏览器的信息
// Screen ，封装了操作系统的屏幕信息
// History ，封装了浏览器访问历史信息
// Location ，封装浏览器地址栏信息

Window 对象
所有浏览器都支持 window 对象。它表示整个浏览器窗口或者浏览器中一个选项卡窗口
//打开页面，就要使用window.open方法
//window.open(URL,name,features);
//url,打开新窗口的地址
//name， 窗口的名字
//features,窗口的特征
window.open("adv.html","广告面",
"width=500px,height=300px,status=yes,left=200px,top=100px");


所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

它包含document、location、history等对象。

location对象

用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

获取href属性    得到地址栏中访问地址
设置href属性    跳转到一个新的页面
window.location.href = "http://www.baidu.com;
window.location = "http://www.baidu.com";是正确的。

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

history对象

表示浏览器中的前进和后退按钮，如：页面刷新。

go(-1后退/0刷新/1前进)    
重新加载当前页面，相当于浏览器中的刷新按钮

注意这种写法：window.history.go("http://www.baidu.com")是错误的。

history.back() - 与在浏览器点击后退按钮相同 
history.forward() - 与在浏览器中点击按钮向前相同

<body>
<div><span id="time">5</span>秒后跳转到其它页面</div>
<script>
    //计数器
    var time = 5;
    var timeID = null;
    //改变时间
    function changeTime(){
        //如果计数器为1
        if(time == 1){
            //清空/停止定时器
            window.clearInterval(timeID)
            //跳转到05_bom.html页面
            window.location.href = "test.html";
        }else{
            //计数器--
            time--;
            //将time变量的值再次设置到span标签中
            document.getElementById("time").innerHTML = time;
        }
    }

    //启动定时器，返回定时器的标识符，如1
    timeID = window.setInterval("changeTime()",1000);
</script>
</body>