JS--JavaScript使用window对象控制窗口大小(innerWidth、innerHeight)和位置(moveTo()、moveBy())、设置随机移动弹窗（小网站专用...）

最新推荐文章于 2024-06-26 12:08:40 发布

吴声子夜歌

最新推荐文章于 2024-06-26 12:08:40 发布

阅读量6.8k

点赞数 5

分类专栏： JavaScript 文章标签： JavaScript JS控制窗口位置 JS控制窗口大小 JS设置随机移动窗口

本文链接：https://blog.csdn.net/cold___play/article/details/101308434

版权

JavaScript 专栏收录该内容

47 篇文章 8 订阅

订阅专栏

控制窗口位置

使用window对象的screenLeft和screenTop属性可以读取或设置窗口的位置，即相对于屏幕左边和上边的位置。IE、Opera和Chrome都支持这两个属性。Firefox支持使用window对象的screenX和screenY属性进行相同的操作，Safari和Chrome也同时支持这两个属性。

示例：跨浏览器获取窗口左边和上边的位置

var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
			var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
			document.write("leftPos:" + leftPos + " topPos:" + topPos);

在这里插入图片描述
移动窗口：
使用window对象的moveTo()和moveBy()方法可以将窗口精确的移动到一个新的位置。这两个方法都接收两个参数，其中moveTo()接收的是新位置的x和y坐标，而moveBy()接收的是在水平和垂直方向上移动的像素数。

示例：

window.moveTo(0, 0);//移动到左上角
window.moveBy(0,100);//向下移动100像素
window.moveTo(200, 300);//移动到200，300的新位置
window.moveBy(-50, 0);//左移50像素

$\color{red}{注意：这两个方法可能会被浏览器禁用。另外，这两个方法都不适用于框架，仅适用于最外层的window对象...}$

控制窗口大小

使用window对象的innerWidth、innerHeight、outerWidth、outerHeight这四个属性可以确定窗口大小。IE9+、Safari、Opera和Chrome都支持这4个属性。

在IE9+、Safari和Firefox中，outerWidth和outerHeight返回浏览器窗口本身的尺寸；在Opera中，outerWidth和outerHeight返回视图容器的大小。innerWidth和innerHeight表示页面视图的大小，去掉边框的宽度。在Chrome中，innerWidth、innerHeight、outerWidth、outerHeight返回相同的值，即视图的大小。

注意：
IE8及更早版本没有提供取得当前浏览器窗口尺寸的属性，主要通过DOM提供页面可见区域的相关信息。

在IE、Firefox、Safari、Opera和Chrome中，document.documentElement.clientWidth和document.documentElement.clientHeight保存了页面视图的信息。在IE6中，这些属性必须在标准模式下才有效，对于怪异模式下的Chrome，则无论通过document.documentElement,还是document.body中的clientWidth和clientHeight属性，都可以取得视图大小。

示例：取得页面视图的大小

var pageWidth = window.innerWidth, pageHeight = window.innerHeight;
if (typeof pageWidth != "number"){
	if(document.compatMode == "CSS1Compat"){
		pageWidth = document.documentElement.clientWidth;
		pageHeight = document.documentElement.clientHeight;
	}else{
		pageWidth = document.body.clientWidth;
		pageHeight = document.body.clientHeight;
	}
}
document.write("宽度：" + pageWidth + " 高度：" + pageHeight);

在这里插入图片描述
在上面的代码中，先将window.innerWidth和window.innerHeight的值分别赋给了pageWidth和pageHeight。
然后，检查pageWidth中保存的是不是一个数值：如果不是，则通过检查document.compatMode属性确定页面是否处于标准模式。如果是，则分别使用document.documentElement.clientWidth和document.documentElement.clientHeight的值。否则，就使用document.body.clientWidth和document.body.clientHeight的值。

注意：
对于移动设备，window.innerWidth和window.innerHeight保存着可见视图，也就是屏幕上可见页面区域的大小。移动IE浏览器不支持这些属性，但通过document.documentElement.clientWidth和document.documentElement.clientHeight提供相同的信息。随着页面的缩放，这些值也会相应变化。

在其他移动浏览器中，document.documentElement是布局视图，即渲染后的页面实际大小，与可见视图不同，可见视图只是整个页面中的一小部分。移动IE浏览器把布局视图的信息保存在document.body.clientWidth和document.bodyclientHeight中。这些值不会随着额面缩放变化。

由于与桌面浏览器存在这些差异，最好是先检测一下用户是否在使用移动设备，然后再决定使用哪个属性。

另外，window对象定义了resizeBy(0和resizeTo(0方法，它们可以按照相对数量和绝对数量调整窗口的大小。这两个方法都包含两个参数，分别表示x轴坐标和y轴坐标。名称中包含To字符串的方法都是绝对的，也就是x和y参数坐标给出窗口新的绝对位置、大小或滚动偏移；名称中包含By字符串的方法都是相对的，也就是它们再窗口的当前位置、大小或滚动偏离上增加所指定的参数x和y的值。

scrollBy()：
会将窗口中显示的文档向左、向右或者向上、向下滚动指定数量的像素
scrollTo()：
会将文档滚动到一个绝对的位置。它将移动文档以便在窗口文档区的左上角显示指定的文档坐标。

示例：将当前浏览器窗口大小设置为200*200，然后随机指定位置（类似于小网站的移动弹窗）

window.onload = function(){
	timer = window.setInterval("jump()", 1000);
}
function jump(){
	window.resizeTo(200,200);
	x = Math.ceil(Math.random() * 1024);
	y = Math.ceil(Math.random() * 760);
	window.moveTo(x, y);
}