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

绝地灬酷狼 2021-08-13 11:07 1012阅读 0赞

#### 控制窗口位置 ####

使用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);

![在这里插入图片描述][20190924203032368.png]  
**移动窗口：**  
使用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像素

注 意 ： 这 两 个 方 法 可 能 会 被 浏 览 器 禁 用 。 另 外 ， 这 两 个 方 法 都 不 适 用 于 框 架 ， 仅 适 用 于 最 外 层 的 w i n d o w 对 象 . . . \\color\{red\}\{注意：这两个方法可能会被浏览器禁用。另外，这两个方法都不适用于框架，仅适用于最外层的window对象...\} 注意：这两个方法可能会被浏览器禁用。另外，这两个方法都不适用于框架，仅适用于最外层的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属性，都可以取得视图大小。

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

![在这里插入图片描述][20190924195702326.png]  
在上面的代码中，先将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);
    }

**测试：IE、Edge成功，Chrome和FireFox失败**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]

[20190924203032368.png]: /images/20210813/f628bf753d274f57a8d08f77b8784b19.png
[20190924195702326.png]: /images/20210813/1cdc6eaca137434bbda96bdd33debe48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/3cc87ec71fc94948a1458608f6e54f40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]: /images/20210813/8b034e6e079644859042cdd20d4182d6.png