你知道window上都有哪些常用的属性和方法吗(上)

232 阅读3分钟

「这是我参与11月更文挑战的第24天,活动详情查看:2021最后一次更文挑战

window代表整个浏览器,代表全局。所以在全局声明的函数、变量都是属于window,包括变量未声明就赋值也该变量也属于window。

  1. 查看浏览器窗口尺寸(或者叫可视区域,不包括工具栏和滚动条)
//IE9以上、Chrome、Firefox、Opera 以及 Safari:
window.innerWidth;
window.innerHeight;
//IE5,6,7,8
window.documentElement.clientHeight ;
window.documentElement.clientWidth;
//IE5,6,7,8兼容性紊乱上面方法不一定行,不行可用下面这种方式
window.body.clientWidth
window.body.clientHeight

封装一个兼容所有浏览器的方法,用于获取浏览器可视宽高:

window.getInnerWH = function () {
    return {
        width: window.innerWidth || window.documentElement.clientWidth || window.body.clientWidth,
        height: window.innerHeight || window.documentElement.clientHeight || window.body.clientHeight
    }
}
  1. 查看完整窗口大小
window.outerWidth
window.outerHeight
  1. 查看元素的尺寸
var odiv = document.getElementsByTagName('div')[0]
odiv.offsetWidth
odiv.offsetHeight

offsetHeight = height + padding + border offsetWidth = width + padding + border 4. 查看元素的位置

odiv.offsetLeft 距离左边距离 odiv.offsetTop 距离右边距离 有定位元素,返回的是相对于最近有定位的父级元素的位置;无定位元素,返回的是相对于文档的位置 5. 查看元素最近有定位的父级 odiv.offsetParent 返回最近有定位的父级,若无,则返回body;body的offsetParent返回null; 6. 查看元素的几何尺寸 odiv.getBoundingClientRect() 该方法返回一个对象,对象里面有left、right、top、bottom和width、height。 兼容性很好,但返回的结果并不是实时的。 7. 打开一个窗口

window.open(URL,name,specs,replace)

URL:表示要打开的页面地址。如果没有指定URL,打开空白窗口 name:指定target属性或窗口的名称

  • _blank - URL加载到一个新的窗口。这是默认
  • _parent - URL加载到父框架
  • _self - URL替换当前页面
  • _top - URL替换任何可加载的框架集
  • name - 窗口名称

specs:设置窗口规格,可选。一个逗号分隔的项目列表

  • height=pixels 窗口的高度。最小值为100
  • left=pixels 该窗口的左侧位置
  • location=yes|no|1|0 是否显示地址字段.默认值是yes
  • menubar=yes|no|1|0 是否显示菜单栏.默认值是yes
  • resizable=yes|no|1|0 是否可调整窗口大小.默认值是yes
  • scrollbars=yes|no|1|0 是否显示滚动条.默认值是yes
  • status=yes|no|1|0 是否要添加一个状态栏.默认值是yes
  • titlebar=yes|no|1|0 是否显示标题栏.被忽略,除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
  • toolbar=yes|no|1|0 是否显示浏览器工具栏.默认值是yes
  • top=pixels 窗口顶部的位置.仅限IE浏览器
  • width=pixels 窗口的宽度.最小.值为100
  • channelmode=yes|no|1|0 是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
  • directories=yes|no|1|0 是否添加目录按钮。默认是肯定的。仅限IE浏览器
  • fullscreen=yes|no|1|0 浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window,还必须在影院模式。仅限IE浏览器

replace:可选,用于替换浏览历史中的当前条目 Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。支持下面的值: true - URL 替换浏览历史中的当前条目。 false - URL 在浏览历史中创建新的条目。