JS

您所在的位置:网站首页 能小窗口的浏览器 JS

JS

2023-12-14 04:17| 来源: 网络整理| 查看: 265

控制窗口位置

使用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像素

注 意 : 这 两 个 方 法 可 能 会 被 浏 览 器 禁 用 。 另 外 , 这 两 个 方 法 都 不 适 用 于 框 架 , 仅 适 用 于 最 外 层 的 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属性,都可以取得视图大小。

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

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); }

测试:IE、Edge成功,Chrome和FireFox失败 在这里插入图片描述 在这里插入图片描述



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3