Fork me on GitHub

window对象

发表于 | 分类于 |
字数统计: 1.5k字 | 阅读时长 ≈ 5分

使用 window 创建全局变量，遇到坑。
来学习一下 window 对象到底是什么？

首先记录一下遇到的坑：
在 React 项目里面使用向 window 对象添加新属性的方式创建一个全局变量，以便在整个项目中复用该变量，
天真的以为将 window.SERVERHOST=’http://localhost:3000'放在任何地方都可以，
所以就偷懒放到了封装请求 api.js,以便打包部署的时候一起改变请求 Server 地址 。
测试发现刷新某些页面之后 window.SERVERHOST 拿到的永远是 undefined，
注意 window 对象在刷新页面之后会重置
之所以有些页面还可以拿到，是因为页面刷新同时发送请求，执行了 api.js，重新设置 window.SERVERHOST=’http://localhost:3000'

解决方法：
1、将 window.SERVERHOST=’http://localhost:3000'放到所有页面都要执行的路由配置文件中，
这样刷新后重新判断路由，就可以创建新的全局 SERVERHOST
2、创建一个 js 文件，创建常量 const SERVERHOST=’http://localhost:3000',然后 export { SERVERHOST},
在其他需要使用的页面就可以通过 import 引入该变量。同样，其他全局需要使用的一些变量或方法也可以都放在该文件中。

由于其他均使用了 window.SERVERHOST，所有我采用的方法一，其实方法二更合理一些

Wndow 对象

定义

指当前浏览器窗口，是所有对象的顶层对象
JS 规定，浏览器环境的所有全局变量，都是 window 对象的属性

1
2
var a=1;
window.a //1

Window 对象的属性

  1. window.window 指向自身

    1
    window.window===this //true

  2. window.name 用于设置当前浏览器窗口的名字

  3. window.location
    返回一个 location 对象，用于获取窗口当前的 URL 信息。
    等同于 document.location 对象

    1
    window.location===document.location //true

  4. window.closed 返回一个布尔值，表示窗口是否关闭
    一般用来检查使用脚本打开的新窗口是否关闭

    1
    2
    3
    4
    5
    var x=window.open();
    x.closed //false
    if(x!=null && !x.closed){
       console.log('窗口仍然打开')
    }

  5. window.opener
    窗口是用 javascript 打开时，指向打开它的那人窗口（开启者）
    如果没有父窗口则返回 null

  6. window.screenX，window.screenY，
    window.screenLeft 和 window.screenTop

    window.screenX/window.screenLeft：返回浏览器窗口左上角相对于当前屏幕左上角((0,0))的水平距离；
    window.screenY/window.screenTop：返回浏览器窗口左上角相对于当前屏幕左上角((0,0))的垂直距离

    IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。

  7. window.innerHeight,window.innerWidth（只读属性）
    window.innerHeight：返回当前窗口中可见部分的高度，即视口（viewport），单位为像素
    window.innerWidth：返回当前窗口中可见部分的宽度，即视口（viewport），单位像素
    注意,
    这两个属性不包括菜单栏、工具栏及滚动条的高度和宽度（在 Mac Chrome 上测试的）
    IE 不支持这些属性，用 document.documentElement 或 document.body 的 clientWidth 和 clientHeight 属性作为代替

  8. window.outHeight,window.outWidth（只读整数）
    window.outHeight：返回浏览器窗口的高度，包括浏览器菜单和边框，单位为像素
    window.outWidth：返回浏览器窗口的宽度，包括浏览器菜单和边框，单位为像素
    注意，IE 不支持此属性，没有替代属性

  9. window.pageXOffset,window.pageYOffset（像素）
    window.pageXOffset：设置或返回当前页面相对于窗口显示区左上角的  水平距离（滚动距离）。
    window.pageYOffset：设置或返回当前页面相对于窗口显示区左上角的垂直距离（滚动距离）。

Window 对象的方法

窗体控制

  • moveBy(x,y)
    从当前位置水平移动窗体 x 个像素，垂直移动窗体 y 个像素，x 为负数，将向左移动窗体，y 为负数，将向上移动窗体
  • moveTo(x,y)
    移动窗体左上角到相对于屏幕左上角的(x,y)点，当使用负数做为参数时会吧窗体移出屏幕的可视区域
  • resizeBy(w,h)
    相对窗体当前的大小，宽度调整 w 个像素，高度调整 h 个像素。如果参数为负值，将缩小窗体，反之扩大窗体
  • resizeTo(w,h)
    把窗体宽度调整为 w 个像素，高度调整为 h 个像素

窗体滚动轴控制

  1. window.scrollTo(x,y)把内容滚动到指定的坐标
    x:内容显示区左上角相对于浏览器窗口的 x 坐标
    y:内容显示区左上角相对于浏览器窗口的 y 坐标

  2. window.scrollBy(x ,y)内容滚动指定的像素数
    x：把文档向右滚动的像素数
    y：把文档向下滚动的像素数

新建窗体
window.open(URL,name,features,replace)
用于新建另一个浏览器窗口，并返回该窗口对象或查找一个已命名的窗口

  • URL：可选字符串，要在新窗口中显示的文档的 URL，
    如果省略该参数（about:blank） 或是空字符串，新窗口不会显示任何文档
  • name：可选字符串，新窗口的名字， 包含数字、 字母、下划线
    如果该名字的窗口已存在，则跳到该窗口，就不再新建窗口。
    如果省略默认使用_blank，新建一个没有名字的窗口
  • features：可选字符串，内容为逗号分隔的键值对
     声明新窗口要显示的标准浏览器的特征。如果省略，新窗口将显示所有标准特征。
  • replace：可选布尔值，规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：
    true - URL 替换浏览历史中的当前条目。
    false - URL 在浏览历史中创建新的条目。

关闭窗体
window.close()
一般用来关闭 window.open 方法新建的窗口
将关闭有 window 指定的顶层浏览器窗口

1
2
var a = window.open('baidu.html','baidu');
a.close()

子对象

  • document 对象
  • frames 对象
  • history 对象
  • location 对象
  • navigator 对象
  • screen 对象
-------------本文结束感谢阅读-------------