window窗口操作

最新推荐文章于 2024-03-26 23:03:57 发布

阿云ivan

最新推荐文章于 2024-03-26 23:03:57 发布

阅读量2.1k

点赞数

分类专栏： Js.BOM 文章标签：浏览器 mozilla javascript 框架 safari url

本文链接：https://blog.csdn.net/avon520/article/details/2685360

版权

Js.BOM 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

window对象表示整个浏览器窗口。

1. 窗口操作

q moveBy(dx,dy)——把浏览器窗口相对当前位置水平移动dx个像素，垂直移动dy个像素。dx值为负数，向左移动窗口，dy值为负数，向上移动窗口。

q moveTo(x,y)——移动浏览器窗口，使它的左上角位于用户屏幕的(x,y)处。可以使用负数，不过这样会把部分窗口移出屏幕的可视区域。

q resizeBy(dw,dh)——相对于浏览器窗口的当前大小，把它口的宽度调整dw个像素，高度调整dy个像素。dw为负数，把缩小窗口的宽度，dy为负数，缩小窗口的高度。

q resizeTo(w,h)——把窗口的宽度调整为w，高度调整为h。不能使用负数。

另外

q IE提供了window.screenLeft和window.screenTop对象来判断窗口的位置，但未提供任何判断窗口大小的方法。

用document.body.offsetWidth和document.body. offsetHeight属性可以获取视口的大小（显示HTML页的区域），但它们不是标准属性。（FF也支持）

q Mozilla Firefox提供window.screenX和window.screenY属性判断窗口的位置。它还提供了window.innerWidth和window.innerHeight属性来判断视口的大小，window.outerWidth和window.outerHeight属性判断浏览器窗口自身的大小。

q Opera和Safari提供与Mozilla相同的工具。

function getWidthHeidth()
{
    var WidthHeidth="";
    WidthHeidth+="IE:window.screenLeft:/t"+window.screenLeft;
    WidthHeidth+="/nIE:window.screenTop:/t"+window.screenTop;
    WidthHeidth+="/nFF:window.screenX:/t"+window.screenX;
    WidthHeidth+="/nFF:window.screenY:/t"+window.screenY;
    
    WidthHeidth+="/nIE & FF:window.document.body.offsetWidth:/t"+window.document.body.offsetWidth;
    WidthHeidth+="/nIE & FF:window.document.body.offsetHeight:/t"+window.document.body.offsetHeight;
    
    WidthHeidth+="/nIE & FF:window.document.documentElement.clientWidth:/t"+window.document.documentElement.clientWidth;
    WidthHeidth+="/nIE & FF:window.document.documentElement.clientHeight:/t"+window.document.documentElement.clientHeight;
    
    WidthHeidth+="/nFF:window.innerWidth:/t"+window.innerWidth;
    WidthHeidth+="/nFF:window.innerHeight:/t"+window.innerHeight;
    WidthHeidth+="/nFF:window.outerWidth:/t"+window.outerWidth;
    WidthHeidth+="/nFF:window.outerHeight:/t"+window.outerHeight;
    
    WidthHeidth+="/nIE & FF:window.screen.width:/t"+window.screen.width;//分辨率
    WidthHeidth+="/nIE & FF:window.screen.height:/t"+window.screen.height;//分辨率
    WidthHeidth+="/nIE & FF:window.screen.availWidth:/t"+window.screen.availWidth;
    WidthHeidth+="/nIE & FF:window.screen.availHeight:/t"+window.screen.availHeight;
    
    
    alert(WidthHeidth);
}

2. 打开/关闭窗口

用JavaScript可以导航到指定的URL，并用window.open()方法打开新窗口。该方法接受四个参数，即要载入新窗口的页面的URL、新窗口的名字（为目标所用）、特性字符串和说明是否用新载入的页面替换当前载入的页面的Boolean值。一般只用前三个参数，因为最后一个参数只有在调用window.open()方法却不打开新窗口时才有效。

如果用已有框架的名字作为window.open()方法的第二个参数调用它，那么URL所指的页面就会被载入该框架。例如，要把页面载入名为“topFrame”的框架，可以使用下面的代码：

这行代码的行为就像用户点击一个链接，该链接的href为http://www.wrox.com/，target为"topFrame"。专用的框架名_self、_parent、_top和_blank也是有效的。

如果声明的框架名无效，window.open()将打开新窗口，该窗口的特性由第三个参数（特性字符串）决定。如果省略第三个参数，将打开新的浏览器窗口，就像点击了target被设置为_blank的链接。这意味着新浏览器窗口的设置与默认浏览器窗口的设置（工具栏、地址栏和状态栏都是可见的）完全一样。

如果使用第三个参数，该方法就假设应该打开新窗口。特性字符串是用逗号分隔的设置列表，它定义新创建的窗口的某些方面。下表显示了各种设置：

设置	值	说明
left	Number	说明新创建的窗口的左坐标。不能为负数^*
top	Number	说明新创建的窗口的上坐标。不能为负数^*
height	Number	设置新创建的窗口的高度。该数字不能小于100^*
width	Number	设置新创建的窗口的宽度。该数字不能小于100^*
resizable	yes,no	判断新窗口是否能通过拖动边线调整大小。默认值是no
scrollable	yes,no	判断新窗口的视口容不下要显示的内容时是否允许滚动。默认值是no
toolbar	yes,no	判断新窗口是否显示工具栏。默认值是no
status	yes,no	判断新窗口是否显示状态栏。默认值是no
location	yes,no	判断新窗口是否显示（Web）地址栏。默认值是no

* 将在第19章详细讨论这些浏览器的安全性特征。

如前所述，特性字符串是用逗号分隔的，因此在逗号或等号前后不能有空格。例如，下面的字符串是无效的：

由于逗号后和几个等号前后的空格，所以该字符串无效。删除空格，它就能正常运行：

居中打开

var w=500;
var h=600;
var l=screen.width/2-w/2;
var t=screen.height/2-h/2;
window.open("Menu.aspx","newwin","left="+l+",top="+t+",width="+w+",height="+h+",toolbar=0,status=0,location=0,menubar=0,scrollbars=0,resizable=no");

window.open()方法将返回window对象作为它的函数值，该window对象就是新创建的窗口（如果给定的名字是已有的框架名，则为框架）。用这个对象，可以操作新创建的窗口：

还可以使用该对象调用close()方法关闭新创建的窗口：

如果新创建的窗口中有代码，还可以用下面的代码关闭其自身：

这段代码只对新创建的窗口有效。如果在主浏览器窗口中调用window.close()方法，将得到一条消息：提示该脚本试图关闭窗口，询问是否真的要关闭该窗口。通用规则是，脚本可以关闭它们打开的任何窗口，但不能关闭其他窗口。

IE: js关闭非window.open的窗口时会出现询问对话框。

FF: 不允许js关闭非window.open的窗口，代码不响应。

新窗口还有对打开它的窗口的引用，存放在opener属性中。只在新窗口的最高层window对象才有opener属性，这样用top.opener访问它会更安全。例如：

在这个例子中，打开一个新窗口，然后测试它的opener属性是否等于window对象，从而证明opener属性确实指向window对象（该警告显示"true"）。

3. 系统对话框

除弹出新的浏览器窗口，还可使用其他方法向用户弹出信息，即利用window对象的alert()、confirm()和prompt()方法。

4. 状态栏

状态栏是底部边界内的区域

status可以使状态栏的文本暂时改变，而defaultStatus则可在用户离开当前页面前一直改变该文本。例如，在第一次载入页面时，可使用默认的状态栏消息：

你也许还想在用户把鼠标移到某个链接上时显示该链接的信息：

在使用JavaScript URL时这点非常有用，因为默认情况下，当鼠标移到链接上时，浏览器默认在状态栏中显示href特性的值。

5. 时间间隔和暂停

setTimeout(), clearTimeout()

setInterval(), clearInterval()

JavaScript支持暂停和时间间隔，这可有效地告诉浏览器应该何时执行某行代码。所谓暂停，是在指定的毫秒数后执行指定的代码。时间间隔是反复执行指定的代码，每次执行之间等待指定的毫秒数。

可以用window对象的setTimeout()方法设置暂停。该方法接受两个参数，要执行的代码和在执行它之前要等待的毫秒数（1/1000秒）。第一个参数可以是代码串（与eval()函数的参数相同），也可是函数指针。例如，下面的代码都在1秒钟后显示一条警告：

当然，还可以引用以前定义的函数：

调用setTimeout()时，它创建一个数字暂停ID，与操作系统中的进程ID相似。暂停ID本质上是要延迟的进程的ID，在调用setTimeout()后，就不应该再执行它的代码。要取消还未执行的暂停，可调用clearTimeout()方法，并将暂停ID传递给它：

时间间隔与暂停的运行方式相似，只是它无限次地每隔指定的时间段就重复一次指定的代码。可调用setInterval()方法设置时间间隔，它的参数与setTimeout()相同，是要执行的代码和每次执行之间等待的毫秒数。例如：

此外，与setTimeout()类似，setInterval()方法也创建时间间隔ID，以标识要执行的代码。ClearInterval()方法可用这个ID阻止再次执行该代码。显然，这一点在使用时间间隔时更重要，因为如果不取消时间间隔，就会一直执行它，直到页面被卸载为止。下面是时间间隔用法的一个常见示例：