web前端窗口问题

一、修改window对象位置的属性与方法

IE、Safari、Opera和Chrome浏览器具有的属性
	screenLeft和screenTop属性
	screenLeft:窗口相对与屏幕左边
	screenTop:窗口相对与屏幕上边
Firefox浏览器具有的属性
	screenX:窗口相对与屏幕左边
	screenY:窗口相对与屏幕上边

跨浏览器获取窗口左边与上边的位置

//先判断screenLeft和screenTop属性是否存在(即是否是IE、Safari、Opera和Chrome),不存在(即是在Firefox浏览器中)
var LeftX = (typeof window.screenLeft == "number")?window.screenLeft : window.screenX;
var LeftY = (typeof window.screenTop == "number")?window.screenTop : window.screenY;

移动窗口

moveTo函数是将窗口移动到指定位置上,参数x,y就是指定的位置
moveTo(x,y)
moveBy函数是将窗口移动到新位置,参数x,y就是在x轴与y轴位置移动的距离
moveBy(x,y)

注意:这两个方法可能被浏览器禁用,也都不适应与框架,只能对最外层的window对象使用。

二、浏览器窗口大小

IE9+、Firefox、Safari、Opera和Chrome具有的属性
innerWidth:
innerHeight:
outerWidth:
outerHeight:
在Safari和Firefox中,outerWidth和outerHeight返回浏览器窗口本身的尺寸(无论是从最外层的window对象还是从某个框架访问)。
Opera中,这两个属性的值表示页面视图容器的大小。而innerWidth和innerHeight则表示该容器中页面视图区的大小(减去边框宽度)。
Chrome中,outerWidth.outerHeight与innerWidth,innerHeight返回相同的值,即视口(viewport)大小而非浏览器窗口大小。
 IE没有提供取得当前浏览器窗口尺寸的属性;不过,它通过DOM提供了页面可见区域的相关信息。
   在IE以及Firefox、Safari、Opera和Chrome中,document.documentElement.clientWidth和
document.documentElement.clientHeight中保存了页面视口的信息。

调整窗口大小

resizeTo函数是将窗口调整到指定大小上,参数x,y就是指定宽与高
resizeTo(x,y)
resizeTo函数是将窗口调整大小,参数x,y就是与原窗口宽与高之差
resizeBy(x,y)

三、打开窗口

window.open(URL,name,specs,replace)
URL	可选。打开指定的页面的URL。如果没有指定URL,打开一个新的空白窗口

name 可选。指定target属性或窗口的名称。支持以下值:
_blank - URL加载到一个新的窗口。这是默认
_parent - URL加载到父框架
_self - URL替换当前页面
_top - URL替换任何可加载的框架集
name - 窗口名称

specs	可选。一个逗号分隔的项目列表。支持以下值:
channelmode=yes|no|1|0	是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
directories=yes|no|1|0	是否添加目录按钮。默认是肯定的。仅限IE浏览器
fullscreen=yes|no|1|0	浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window,还必须在影院模式。仅限IE浏览器
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

replace	Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。支持下面的值:
true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目。
close()  可以关掉打开的窗口
注意:这个方法只适用于通过window.open()打开的窗口

你可能感兴趣的:(javascript,es6,typescript)