第九讲 window知识总结

最新推荐文章于 2024-03-08 10:37:46 发布

Fiki515

最新推荐文章于 2024-03-08 10:37:46 发布

阅读量157

点赞数

文章标签： java

本文链接：https://blog.youkuaiyun.com/Fiki515/article/details/124307743

版权

一、screen属性

window.screen 对象包含有关用户屏幕的信息

screen.availWidth 屏幕宽度

screen.availHeight 屏幕高度

二、history对象

forward() 方法可加载历史列表中的下一个页面

back() 方法可加载历史列表中的前一个页面（如果存在）

go(参数) 方法可加载历史列表中的某个具体的页面

参数可以是数字，使用的是要访问的页面在 History 的页面列表中的相对位置。

go(0) 刷新本页面

go(1) 前进一个页面

go(-1) 返回前一个页面

<body>
    <h1>首页</h1>
    <a href="57list.html">列表页</a>
    <a href="javascript:history.forward();">列表页</a>
    <a href="javascript:history.back();">上一页</a>
    <a href="javascript:history.go(1);">下一页</a>
</body>

三、location对象

location.href 返回当前页面的地址

location.pathname 路径名

location.reload() 重新加载刷新本页面

<body>
    <button id="btn">
        去百度
    </button>
</body>
<script>
    console.log(location.pathname);//路径名
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        //location.href = "http://www.baidu.com";
        location.reload();//重新加载 刷新本页面
    }
</script>

四、 navigator

window.navigator 对象包含有关访问者浏览器的信息。

 // console.log(navigator.userAgent);用户代理
    // 谷歌; // Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36
    // 火狐; // Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:99.0) Gecko/20100101 Firefox/99.0
    // ie11; // Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko
    // ie10; // Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
    // ie9; // Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
    // ie8; // Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)

    // var str = navigator.userAgent;
    // if (str.indexOf("Chrome") != -1) {
    //   alert("你用的是谷歌浏览器");
    // } else if (str.indexOf("Firefox") != -1) {
    //   alert("你用的是火狐浏览器");
    // } else if (str.indexOf("MSIE") != -1) {
    //   alert("你用的是ie10以下版本的ie浏览器");
    // }

五、open()

打开一个新的浏览器窗口，加载给定 URL 所指定的文档

window.open(

"http://www.baidu.com",

"_blank",

"width=500,height=500"

);//打开一个新窗口，宽度200px，高度500px

window.close(); //关闭

<script>
    //   console.log(window.location);
    //   console.log(location);
    // console.log(location.href);//返回当前页面的地址url
    // console.log(location.pathname); //路径名
    var oBtn = document.getElementById("btn");
    // oBtn.onclick = function () {
    //   location.href = "http://www.baidu.com";
    //   location.reload(); //重新加载 刷新本页面
    // };

    oBtn.onclick = function () {
      //   window.open(
      //     "http://www.baidu.com",
      //     "_blank",
      //     "width=500,height=500,left=100,top=100"
      //   );
      close();
    };

六、事件

window.onload = function () {};
等到html文档加载完毕(包括图片等下载完毕)后，会触发onload事件

window.onresize = function () {
console.log("窗口大小改变了");
};
当窗口大小发生改变时，会触发onresize事件

window.onscroll = function () {
console.log("你的浏览器滚动条滚动了");
};
当滚动条滚动时会触发onscroll事件

<script>
    //   window.onload = function(){}
    //   等到html文档加载完毕(包括图片等下载完毕)后，会触发onload事件
    // window.onresize = function () {
    //   console.log("窗口大小改变了");
    // };
    // 当窗口大小发生改变时，会触发onresize事件

    // window.onscroll = function () {
    //   console.log("你的浏览器滚动条滚动了");
    // };

    var oDiv = document.getElementById("box");
    oDiv.onscroll = function () {
      //   console.log("div滚动条滚动了");
      //   console.log(oDiv.scrollTop);//滚动条垂直方向滚动的距离
      console.log(oDiv.scrollLeft); //滚动条水平方向滚动的距离
    };
    // 当滚动条滚动时会触发onscroll事件
  </script>

七、回顶部

var _gotop = document.getElementById("gotop");
    var timer = null,
      sTop;
    _gotop.onclick = function () {
      timer = setInterval(function () {
        document.documentElement.scrollTop -= 10;
        sTop = document.documentElement.scrollTop;
        if (sTop <= 0) {
          clearInterval(timer);
        }
        // console.log(sTop);
      }, 100);
    };