BOM中window下的对象以及方法(location对象，history对象，navigator对象)以及加载事件

最新推荐文章于 2022-10-29 20:00:46 发布

杏黄的三叶草

最新推荐文章于 2022-10-29 20:00:46 发布

阅读量270

点赞数

分类专栏： Web前端JavaScript

本文链接：https://blog.csdn.net/dwjdj/article/details/104283981

版权

Web前端JavaScript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

加载事件

 /*
    * 浏览器中有个顶级对象:window
    * 页面中顶级对象:document
    * top是window的另一种表示方法
    * 页面中的所有内容都是浏览器的----->页面中的所有内容都是window
    * 页面加载事件:
    * 只有这个页面加载完毕，这个事件才会触发(页面中的所有内容，包括文本，属性，标签以及外部引入文件)
    * window.οnlοad=function();----->window可以省略
    * */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    window.onload = function () {
        document.getElementById("btn").onclick = function () {
            console.log("可是谁又真的关心谁");
        };
    };
    //扩展的事件---页面关闭后才触发的事件
    window.onunload = function () {
        alert("哈哈");
    };
    //扩展事件---页面关闭之前触发的
    window.onbeforeunload = function () {
        alert("哈哈");
    };
</script>
<input type="button" value="按钮" id="btn">
</body>
</html>

window下对象的说明

/*
    * window.location-----地址栏里面的内容
    * window.location.hash-----地址栏上#以及后面的内容
    * window.location.host----主机以及端口号
    * window.location.hostname----主机名
    * window.location.pathname----文件路径----相对路径
    * window.location.port----端口号
    * window.location.protocol----协议
    * window.location.search----搜索的内容
    * window.location.href="地址";-----地址的跳转
    * window.history.forward();----网页前进
    * window.history.back();----网页后退
    * window.location.assign("地址");----地址的跳转
    * window.location.reload();----重新加载(刷新)
    * window.location.replace("地址");----没有历史记录，不能返回
    * window.navigator.userAgent----通过userAgent可以判断用户浏览器的类型
    * window.navigator.platform----通过platform可以判断浏览器所在的系统平台类型
    * */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //location对象中的属性和方法
    console.log(window.location);
    //地址栏上#及后面的内容
    console.log(window.location.hash);
    //主机名及端口号
    console.log(window.location.host);
    //主机名
    console.log(window.location.hostname);
    //文件的路径---相对路径
    console.log(window.location.pathname);
    //端口号
    console.log(window.location.port);
    //协议
    console.log(window.location.protocol);
    //搜索的内容
    console.log(window.location.search);
    //通过platform可以判断浏览器所在的系统平台类型
    console.log(window.navigator.platform);
    //通过userAgent可以判断用户浏览器的类型
    console.log(window.navigator.userAgent);
    onload=function () {
        document.getElementById("btn").onclick=function () {
            //设置跳转的页面的地址
            location.href="http://www.jd.com";//属性----------------->必须记住
            //location.assign("http://www.jd.com");//方法
            // location.reload();//重新加载--刷新
            // location.replace("http://www.jd.com");//没有历史记录
        };
    };
</script>
<input type="button" value="显示效果" id="btn"/>
</body>
</html>