JavaScript——window对象的调整窗口大小事件

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第24天，点击查看活动详情

window对象的调整窗口大小事件

1.onresize事件

只要窗口大小发生像素变化，就会触发这个事件。我们经常利用这个事件完成响应式布局(如某个元素显示与否)。

1.window.onresize = 匿名函数；
  window.onresize = 函数名;
  window['onresize'] = 函数名; //函数单独写
2.window.addEventListener('resize', 匿名函数); //IE9及其以上才支持
  window.addEventListener('resize', 函数名); //函数单独写//IE9及其以上才支持
注：只有这里列举的实现方式，没有列举到的方式皆不可。

<div>我是一个div</div>
<script>
    var div = document.querySelector('div');
    /* 注册页面加载事件 */
    window.onload = function() {
        /* 注册调整窗口大小事件 */
        window.onresize = function() {
            console.log('窗口大小变化了！');
            if (window.innerWidth <= 900) { //window.innerWidth 获取当前屏幕的宽度获取
                div.style.color = 'red';
                //div.style.display = 'none'; //设置div不显示
            } else {
                div.style.color = 'blue';
                //div.style.display = 'block'; //设置div显示
            }
        }
    }
</script>

2.navigator对象

navigator 对象包含有关浏览器的信息(版本号、运行的平台等)。常用于获取客户端浏览器和操作系统信息。navigator 数据可被浏览器使用者更改，所以来自 navigator 对象的信息有时具有误导性。

/* Navigator对象常见属性 */
console.log("浏览器代号：" + navigator.appCodeName); //即浏览器的应用程序代码名称
console.log("浏览器名称：" + navigator.appName); //即浏览器的应用程序名称。
console.log("浏览器版本：" + navigator.appVersion);
console.log("是否启用Cookies：" + navigator.cookieEnabled);
console.log("硬件平台：" + navigator.platform); //即浏览器平台(操作系统)
console.log("用户代理：" + navigator.userAgent); //即由客户机发送服务器的 user-agent 头部的值。
console.log("用户代理语言：" + navigator.language); //即浏览器语言
console.log("浏览器引擎的产品名称：" + navigator.product);
​
/* Navigator对象属性列表 */
var showtext = "Navigator对象属性列表: \n";
for (var propname in navigator) {
    showtext += propname + ":" + navigator[propname] + "\n";
}
console.log(showtext);

3.location对象

window对象给我们提供了一个location属性，属性返回的是一个对象，因此我们将这个属性称为location对象。

location对象用于获取或设置窗体的URL(即获取和改变当前浏览的网址)，并且可以用于解析URL。

属性和方法	说明
location.href	返回当前窗口正在浏览的网页地址。 改变location.href会重新定位到一个URL（在当前页面刷新，且可回退/前进）。如：location.href="www.baidu.com";
location.host	返回web主机的域名(带端口)，比如本机测试为127.0.0.1:8848。
location.hostname	返回web主机的域名(不带端口)，比如本机测试为127.0.0.1。
location.port	返回端口号，比如本机测试为8848。如果未写，返回空字符串。
location.pathname	当前页面的路径或文件名，比如本机测试为/JavaScript/../JavaScriptUBOMAWindowF.html。
location.protocol	返回使用的 web 协议(http: 或 https:)，比如本机测试为http:。
location.serch	返回参数
location.hash	返回片段。#后面的内容，常见于链接、锚点。
location.assign(url)	同上面的location.href。
location.replace(url)	替换当前页面，不会在 history 对象中生成一个新的记录(即不记录历史)，当使用该方法时，新的 URL 将覆盖 history 对象中的当前记录。所以不能后退/前进页面。转向到url网页地址。如：location.replace("www.baidu.com");
location.reload()	重新载入当前网址，相当于按下刷新按钮。

<button type="button">跳转到百度首页</button>
<script>
    var btn = document.querySelector('button');
    btn.onclick = function() {
        location.href = 'https://www.baidu.com';
        //location.assign('https://www.baidu.com');//同location.href
        //location.replace('https://www.baidu.com');//同location.href，但后退前进功能不可用。
        //location.reload();
    }
</script>

4.document对象

就是前面的DOM模块的内容，此处不再重复。

5.history对象

history对象包含浏览器历史，即含有用户在浏览器窗口中访问过的网页的URL地址。

属性和方法	说明
history.length	浏览器历史列表中的URL数量
history.back()	等同于在浏览器点击“后退”按钮。等价于history.go(-1)
history.forward()	等同于在浏览器中点击“前进”按钮。等价于history.go(1)
history.go(i)	选择任意历史记录加载。即转到任意历史记录。 参数如果是1表示前进1个页面，如果是-1表示后退一个页面。
history.go(0)	刷新当前页面。
history.go(-2)	单击两次“后退”按钮。

【list.html】
<a href="listDetail.html">查看详情</a>
<button>前进</button>
<script>
    var btn = document.querySelector('button');
    btn.onclick = function() {
        // history.forward();
        history.go(1);
    }
</script>
​
【listDetail.html】
<a href="list.html">回到列表</a>
<button>后退</button>
<script>
    var btn = document.querySelector('button');
    btn.addEventListener('click', function() {
        // history.back();
        history.go(-1);
    })
</script>

6.screen对象

screen 对象包含有关客户端显示的用户屏幕的信息，常用于获取屏幕的分辨率和色彩。

属性	说明
screen.width	返回以像素计的访问者屏幕的宽度。
screen.height	返回以像素计的访问者屏幕的高度。
screen.availWidth	返回以像素计的访问者屏幕的可用宽度。（减去诸如窗口工具条之类的界面特征）
screen.availHeight	返回以像素计的访问者屏幕的可用高度。（减去诸如窗口工具条之类的界面特征）
screen.colorDepth	返回色彩深度。
screen.pixelDepth	返回色彩分辨率。

console.log(screen.width); //1920
console.log(screen.height); //1080
console.log(screen.availWidth); //1920
console.log(screen.availHeight); //1030
console.log(screen.colorDepth); //24
console.log(screen.pixelDepth); //24

7.frames对象

window 对象表示浏览器中打开的窗口。如果文档包含框架(frame或iframe标签)，浏览器会为HTML文档创建一个window对象，并为每个框架创建一个额外的window对象。这些框架的window对象会被存放在frames集合中，即浏览器窗口对象的window.frames属性中，并可以通过下标或框架名进行索引。

属性	说明
window.parent	返回当前窗口的父窗口。
window.top	返回当前窗口的最顶层浏览器窗口。
window.frames	以集合的方式返回当前窗口中包含的所有框架的window对象。 该集合是window对象的数组，即数组中的一元素是一个个框架的window对象。
window.frames.length	数组frames[]中含有的元素个数。 frames[]数组中引用的框架可能还包括框架，它们自己也具有frames[]数组。
window.frames.nameValue	根据框架标签(frame/iframe)的name属性值，获取该框架的window对象。
window.frames['nameValue']	根据框架标签(frame/iframe)的name属性值，获取该框架的window对象。
window.frames[0]	根据下标，获取该框架的window对象。（下标从0开始）

【首页：jsIndex.html】
<!-- 在一个网页中如果嵌套其他子窗口的话，body不需要。
<body>
</body> 
-->
<frameset rows="100,*"><!-- 第一行100，第二行*（即剩余的都给第二行）-->
    <frame src="jsCat.html" name="one"><!-- 栏目 分类 -->
    <frameset cols="150,*"><!-- 第一列150，第二列*（即剩余的都给第二列）-->
        <frame src="jsMenu.html" name="two"><!-- 菜单 -->
        <frame src="jsCon.html" name="three"><!-- 内容 -->
    </frameset>
</frameset>
​
【框架1：jsCat.html】
<body>
    <button type="button" onclick="window.document.bgColor='red'">操作自己</button><br>
    <button type="button" onclick="window.top.frames['two'].document.bgColor='blue'">操作菜单区</button><br>
    <button type="button" onclick="window.top.frames['three'].document.bgColor='green'">操作内容区</button><br>
</body>
​
【框架2：jsMenu.html】
<body>
    <button type="button" onclick="window.top.frames['one'].document.bgColor='red'">操作分类区</button><br>
    <button type="button" onclick="window.document.bgColor='blue'">操作自己</button><br>
    <button type="button" onclick="window.top.frames['three'].document.bgColor='green'">操作菜单区</button><br>
</body>
​
【框架3：jsCon.html】
<body>
    <button type="button" onclick="window.top.frames['one'].document.bgColor='red'">操作分类区</button><br>
    <button type="button" onclick="window.top.frames['two'].document.bgColor='blue'">操作菜单区</button><br>
    <button type="button" onclick="window.document.bgColor='green'">操作自己</button><br>
</body>