window对象

xiaoxiao2021-02-28 70

Window对象的属性

1.closed

返回一个布尔值，该值声明了窗口是否已经关闭

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

注释：没有应用于 History 对象的公开标准，不过所有浏览器都支持该对象。

返回值

返回一个布尔值，true为关闭，false为未关闭

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

window.closed

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zsh</title> <script> var myWindow; function openWin(){ myWindow=window.open("","","width=400,height=200"); } function closeWin(){ if (myWindow){ myWindow.close(); } } function checkWin(){ if (!myWindow){ document.getElementById("msg").innerHTML="我的窗口没有被打开!"; } else{ if (myWindow.closed){ document.getElementById("msg").innerHTML="我的窗口被关闭!"; } else{ document.getElementById("msg").innerHTML="我的窗口没有被关闭!"; } } } </script> </head> <body> <input type="button" value="打开我的窗口" onclick="openWin()" /> <input type="button" value="关闭我的窗口" onclick="closeWin()" /> <br><br> <input type="button" value="我的窗口被关闭了吗?" onclick="checkWin()" /> <br><br> <div id="msg"></div> </body> </html>

2.frames

性返回窗口中所有命名的框架

该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架或 <iframe>。属性 frames.length 存放数组 frames[] 中含有的元素个数。

注意，frames[] 数组中引用的框架可能还包括框架，它们自己也具有 frames[] 数组。

提示：使用 frames.length 来获取框架的数量。

返回值

返回一个布尔值，true为关闭，false为未关闭

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

window.closed

3. innerHeight

返回窗口的文档显示区的高度

注意：使用 outerWidth 和 outerHeight 属性获取加上工具条与滚动条窗口的宽度与高度。

浏览器支持

googleIEfirefoxsafarioperatrue9.0truetruetrue

window.innerHeight | innerHeight

console.log(window.innerHeight);

4. innerWidth

返回窗口的文档显示区的宽度

注意：使用 outerWidth 和 outerHeight 属性获取加上工具条与滚动条窗口的宽度与高度。

浏览器支持

googleIEfirefoxsafarioperatrue9.0truetruetrue

window.innerWidth| innerWidth

console.log(window.innerWidth);

5. length

返回在当前窗口中frames的数量（包括IFRAMES）

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

window.length| length

6. name

设置或返回存放窗口的名称的一个字符串

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

window.name

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zsh</title> <script> var myWindow; function openWin(){ myWindow=window.open('http://www.zshgrwz.cn','MsgWindow'); myWindow.document.write("<p>窗口名称为: " + myWindow.name + "</p>"); } </script> </head> <body> <input type="button" value="打开我的窗口" onclick="openWin()" /> </body> </html>

7. opener

可读可写的属性，可返回对创建该窗口的 Window 对象的引用

当使用window.open()打开一个窗口，您可以使用此属性返回来自目标窗口源（父）窗口的详细信息。

提示： window.opener.close()将关闭源（父）窗口。

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

window.opener

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zsh</title> <script> function openWin(){ myWindow=window.open('','','width=200,height=100'); myWindow.document.write("<p>这是我的窗口</p>"); myWindow.focus(); myWindow.opener.document.write("<p>这个是源窗口!</p>"); } </script> </head> <body> <input type="button" value="打开我的窗口" onclick="openWin()" /> </body> </html>

8. outerWidth

设置或返回窗口的外部宽度，包括所有的界面元素（如工具栏/滚动）

注意：使用 innerWidth 和 innerHeight 属性获取去除工具条与滚动条的窗口高度与宽度。

浏览器支持

googleIEfirefoxsafarioperatrue9.0truetruetrue

window.outerWidth

console.log(window.outerWidth);

9. outerHeight

设置或返回窗口的外部高度，包括所有的界面元素（如工具栏/滚动）

注意：使用 innerWidth 和 innerHeight 属性获取去除工具条与滚动条的窗口高度与宽度。

浏览器支持

googleIEfirefoxsafarioperatrue9.0truetruetrue

window.outerHeight

console.log(window.outerHeight );

10. pageXOffset

返回当前页面相对于窗口显示区左上角的 X 位置

注意：使用 innerWidth 和 innerHeight 属性获取去除工具条与滚动条的窗口高度与宽度。

浏览器支持

googleIEfirefoxsafarioperatrue9.0truetruetrue

window.pageXOffset

console.log(window.pageXOffset); //兼容方案 ie8 console.log(document.documentElement.scrollLeft );

11. pageYOffset

返回当前页面相对于窗口显示区左上角的 X 位置

注意：使用 innerWidth 和 innerHeight 属性获取去除工具条与滚动条的窗口高度与宽度。

浏览器支持

googleIEfirefoxsafarioperatrue9.0truetruetrue

window.pageYOffset

console.log(window.pageYOffset ); //兼容方案 ie8 console.log(document.documentElement.scrollTop );

12. parent

返回当前窗口的父窗口

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

window.parent

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zsh</title> </head> <head> <script> function openWin(){ window.open('','','width=200,height=100'); alert(window.parent.location); } </script> </head> <body> <input type="button" value="打开窗口" onclick="openWin()"> </body> </html>

13. screenLeft

返回窗口相对于屏幕的X坐标

浏览器支持

googleIEfirefoxsafarioperatruetruefalsetruetrue

注意： Firefox 浏览器请使用 “window.screenX” and “window.screenY”。

window.screenLeft

console.log(window.screenLeft);

14. screenTop

返回窗口相对于屏幕的Y坐标

浏览器支持

googleIEfirefoxsafarioperatruetruefalsetruetrue

注意： Firefox 浏览器请使用 “window.screenX” and “window.screenY”。

window.screenTop

console.log(window.screenTop);

15. screenX

返回窗口相对于屏幕的X坐标

浏览器支持

googleIEfirefoxsafarioperatruefalsetruetruetrue

注意： IE浏览器使用。 “window.screenLeft” 和 “window.screenTop”获得相同的值

window.screenX

console.log(window.screenX );

16. screenY

返回窗口相对于屏幕的Y坐标

浏览器支持

googleIEfirefoxsafarioperatruefalsetruetruetrue

注意： IE浏览器使用。 “window.screenLeft” 和 “window.screenTop”获得相同的值

window.screenY

console.log(window.screenY);

17. self

返回对窗口自身的只读引用

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

window.self

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zsh</title> <script> function check(){ if (window.top!=window.self) { document.write("<p>这个窗口不是最顶层窗口!我在一个框架?</p>") } else{ document.write("<p>这个窗口是最顶层窗口!</p>") } } </script> </head> <body> <input type="button" onclick="check()" value="检查窗口"> </body> </html>

18. top

返回当前窗口的最顶层浏览器窗口

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

window.top

console.log(window.top);

Window 对象方法

1. alert

用于显示带有一条指定消息和一个确认按钮的警告框

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

alert(message);

参数

必需 message 字符串，如果不是字符串会被强制转化为字符串 alert("你好，我是一个警告框！");

2. blur

可把键盘焦点从顶层窗口移开

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruefalse

window.blur()

<!DOCTYPE html> <html> <head> <script> function openWin() { myWindow=window.open('','','width=200,height=100'); myWindow.document.write("<p>The new window.</p>"); myWindow.blur(); } </script> </head> <body> <input type="button" value="Open window" onclick="openWin()"> </body> </html>

3. clearInterval

可取消由 setInterval() 设置的 timeout。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

clearInterval(id_of_setinterval)

参数

必需 id_of_setinterval 由 setInterval() 返回的 ID 值。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zsh</title> </head> <body> <input type="text" id="clock" /> <script type="text/javascript"> var int=self.setInterval("clock()",1000); function clock(){ var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("clock").value=t; } </script> <button onclick="int=window.clearInterval(int)">停止</button> </body> </html>

4. clearTimeout

可取消由 setTimeout() 方法设置的 timeout

clearTimeout()方法的参数必须是由setTimeout()返回的ID值。

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

clearTimeout(id_of_settimeout)

参数

必需 id_of_settimeout 由 setTimeout() 返回的 ID 值。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zsh</title> <script> var c=0; var t; var timer_is_on=0; function timedCount(){ document.getElementById('txt').value=c; c=c+1; t=setTimeout(function(){timedCount()},1000); } function doTimer(){ if (!timer_is_on){ timer_is_on=1; timedCount(); } } function stopCount(){ clearTimeout(t); timer_is_on=0; } </script> </head> <body> <form> <input type="button" value="开始计数!" onclick="doTimer()" /> <input type="text" id="txt" /> <input type="button" value="停止计数!" onclick="stopCount()" /> </form> <p> 单击开始计数按钮，按下时开始计数，输入框将从0开始一直计数。单击停止计数按钮，按下时停止计数，再次点击开始计数按钮，又再次开始计数。 </p> </body> </html>

5. close

用于关闭浏览器窗口

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

window.close()

window.close();

6. confirm

用于显示一个带有指定消息和确认及取消按钮的对话框

提示：如果访问者点击”确定”，此方法返回true，否则返回false。

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

confirm(message)

参数

必需 message 字符串，如果不是字符串会被强制转化为字符串 var x; var r=confirm("按下按钮!"); if (r==true){ x="你按下了\"确定\"按钮!"; } else{ x="你按下了\"取消\"按钮!"; } document.getElementById("demo").innerHTML=x;

7. focus

可把键盘焦点给予一个窗口

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

window.focus()

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zsh</title> <script> function openWin(){ myWindow=window.open('','','width=200,height=100'); myWindow.document.write("<p>这是'我的窗口'</p>"); myWindow.focus(); } </script> </head> <body> <input type="button" value="打开窗口" onclick="openWin()" /> </body> </html>

8. moveBy

可相对窗口的当前坐标把它移动指定的像素

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

window.moveBy(x,y)

参数

必需 x 相对于左边的距离 y 相对于顶部的距离 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zsh</title> <script> function openWin(){ myWindow=window.open('','','width=200,height=100'); myWindow.document.write("<p>这是我的窗口</p>"); } function moveWin(){ myWindow.moveBy(250,250); myWindow.focus(); } </script> </head> <body> <input type="button" value="打开我的窗口" onclick="openWin()" /> <br><br> <input type="button" value="移动我的窗口" onclick="moveWin()" /> </body> </html>

9. moveTo

可把窗口的左上角移动到一个指定的坐标

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

注意：指定moveTo(0.0)，在Opera浏览器的左上角。

window.moveTo(x,y)

参数

必需 x 相对于左边的距离 y 相对于顶部的距离 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zsh</title> <script> function openWin(){ myWindow=window.open('','','width=200,height=100'); myWindow.document.write("<p>这是我的窗口</p>"); } function moveWin(){ myWindow.moveTo(0,0); myWindow.focus(); } </script> </head> <body> <input type="button" value="打开窗口" onclick="openWin()" /> <br><br> <input type="button" value="移动窗口" onclick="moveWin()" /> </body> </html>

10. open

用于打开一个新的浏览器窗口或查找一个已命名的窗口

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

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 在浏览历史中创建新的条目。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zsh</title> <script> function open_win() { window.open("http://www.zshgrwz.cn"); } </script> </head> <body> <form> <input type="button" value="打开窗口" onclick="open_win()"> </form> </body> </html>

11. print

用于打印当前窗口的内容

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

window.print()

window.print();

12. prompt

用于显示可提示用户进行输入的对话框

返回值

这个方法返回用户输入的字符串。

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

prompt(msg,defaultText)

参数

可选 msg 要在对话框中显示的纯文本（而不是 HTML 格式的文本）。 defaultText 默认的输入文本。 prompt("你确定要点确定吗？","不许你点");

13. resizeTo

用于把窗口大小调整为指定的宽度和高度

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

window.resizeTo(width,height)

参数

必需 width 设置窗口的宽度，以像素为单位。 height 设置窗口的高度，以像素为单位。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zsh</title> <script> var w; function openwindow(){ w=window.open('','', 'width=100,height=100'); w.focus(); } function myFunction(){ w.resizeTo(500,500); w.focus(); } </script> </head> <body> <button onclick="openwindow()">创建窗口</button> <button onclick="myFunction()">调整窗口</button> </body> </html>

14. scrollBy

可把内容滚动指定的像素数

注意：要使此方法工作 window 滚动条的可见属性必须设置为true！

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

window.scrollBy(xnum,ynum)

参数

必需 xnum 把文档向右滚动的像素数。 ynum 把文档向下滚动的像素数。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zsh</title> <script> function scrollWindow(){ window.scrollBy(100,100); } </script> </head> <body> <input type="button" onclick="scrollWindow()" value="滚动条" /> <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动 </p> <br> <br> <br> <br> <br> <br> <br> <br> <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动 </p> <br> <br> <br> <br> <br> <br> <br> <br> <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动 </p> <br> <br> <br> <br> <br> <br> <br> <br> <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动 </p> <br> <br> <br> <br> <br> <br> <br> <br> <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动 </p> <br> <br> <br> <br> <br> <br> <br> <br> <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动 </p> <br> <br> <br> <br> <br> <br> <br> <br> <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动 </p> <br> <br> <br> <br> <br> <br> <br> <br> <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动 </p> <br> <br> <br> <br> <br> <br> <br> <br> </body> </html>

15. scrollTo

可把内容滚动指定的坐标

注意：要使此方法工作 window 滚动条的可见属性必须设置为true！

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

window.scrollBy(xpos,ypos)

参数

必需 xpos 要在窗口文档显示区左上角显示的文档的 x 坐标。要在窗口文档显示区左上角显示的文档的 y 坐标。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zsh</title> <script> function scrollWindow(){ window.scrollTo(100,100); } </script> </head> <body> <input type="button" onclick="scrollWindow()" value="滚动条" /> <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动 </p> <br> <br> <br> <br> <br> <br> <br> <br> <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动 </p> <br> <br> <br> <br> <br> <br> <br> <br> <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动 </p> <br> <br> <br> <br> <br> <br> <br> <br> <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动 </p> <br> <br> <br> <br> <br> <br> <br> <br> <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动 </p> <br> <br> <br> <br> <br> <br> <br> <br> <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动 </p> <br> <br> <br> <br> <br> <br> <br> <br> <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动 </p> <br> <br> <br> <br> <br> <br> <br> <br> <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动 </p> <br> <br> <br> <br> <br> <br> <br> <br> </body> </html>

16. setInterval

可按照指定的周期（以毫秒计）来调用函数或计算表达式

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

提示： 1000 毫秒= 1 秒。

googleIEfirefoxsafarioperatruetruetruetruetrue

setInterval(code,millisec,lang)

参数

必需 code 要调用的函数或要执行的代码串。 millisec 周期性执行或调用 code 之间的时间间隔，以毫秒计。可选 lang JScript | VBScript | JavaScript。 <html> <body> <input type="text" id="clock"> <script language=javascript> var int=self.setInterval(function(){clock()},1000); function clock() { var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("clock").value=t; } </script> <button onclick="int=window.clearInterval(int)">Stop</button> </body> </html>

17. setTimeout

用于在指定的毫秒数后调用函数或计算表达式

提示： 1000 毫秒= 1 秒。

googleIEfirefoxsafarioperatruetruetruetruetrue

setTimeout(code,millisec,lang)

参数

必需 code 要调用的函数后要执行的 JavaScript 代码串。 millisec 在执行代码前需等待的毫秒数。可选 lang JScript | VBScript | JavaScript。 var t=setTimeout(function(){alert("Hello")},3000)

文档内容出自 W3cSchool和菜鸟教程，如需查看更详细的有关内容请登录 http://www.w3school.com.cn/ 和 http://www.runoob.com/

转载请注明原文地址: https://www.6miu.com/read-71976.html

技术

最新回复(0)

window对象

Window对象的属性

1.closed

注释：没有应用于 History 对象的公开标准，不过所有浏览器都支持该对象。

返回值

浏览器支持

2.frames

注意，frames[] 数组中引用的框架可能还包括框架，它们自己也具有 frames[] 数组。

返回值

浏览器支持

3. innerHeight

注意：使用 outerWidth 和 outerHeight 属性获取加上工具条与滚动条窗口的宽度与高度。

浏览器支持

4. innerWidth

注意：使用 outerWidth 和 outerHeight 属性获取加上工具条与滚动条窗口的宽度与高度。

浏览器支持

5. length

浏览器支持

6. name

浏览器支持

7. opener

提示： window.opener.close()将关闭源（父）窗口。

浏览器支持

8. outerWidth

注意： 使用 innerWidth 和 innerHeight 属性获取去除工具条与滚动条的窗口高度与宽度。

浏览器支持

9. outerHeight

注意： 使用 innerWidth 和 innerHeight 属性获取去除工具条与滚动条的窗口高度与宽度。

浏览器支持

10. pageXOffset

注意： 使用 innerWidth 和 innerHeight 属性获取去除工具条与滚动条的窗口高度与宽度。

浏览器支持

11. pageYOffset

注意： 使用 innerWidth 和 innerHeight 属性获取去除工具条与滚动条的窗口高度与宽度。

浏览器支持

12. parent

浏览器支持

13. screenLeft

浏览器支持

注意： Firefox 浏览器请使用 “window.screenX” and “window.screenY”。

14. screenTop

浏览器支持

注意： Firefox 浏览器请使用 “window.screenX” and “window.screenY”。

15. screenX

浏览器支持

注意： IE浏览器使用。 “window.screenLeft” 和 “window.screenTop”获得相同的值

16. screenY

浏览器支持

注意： IE浏览器使用。 “window.screenLeft” 和 “window.screenTop”获得相同的值

17. self

浏览器支持

18. top

浏览器支持

Window 对象方法

1. alert

浏览器支持

参数

2. blur

浏览器支持

3. clearInterval

浏览器支持

参数

4. clearTimeout

浏览器支持

参数

5. close

浏览器支持

6. confirm

提示：如果访问者点击”确定”，此方法返回true，否则返回false。

浏览器支持

参数

7. focus

浏览器支持

8. moveBy

浏览器支持

参数

9. moveTo

浏览器支持

注意： 指定moveTo(0.0)，在Opera浏览器的左上角。

参数

注意：使用 innerWidth 和 innerHeight 属性获取去除工具条与滚动条的窗口高度与宽度。

注意：使用 innerWidth 和 innerHeight 属性获取去除工具条与滚动条的窗口高度与宽度。

注意：使用 innerWidth 和 innerHeight 属性获取去除工具条与滚动条的窗口高度与宽度。

注意：使用 innerWidth 和 innerHeight 属性获取去除工具条与滚动条的窗口高度与宽度。

注意：指定moveTo(0.0)，在Opera浏览器的左上角。

注意：要使此方法工作 window 滚动条的可见属性必须设置为true！

注意：要使此方法工作 window 滚动条的可见属性必须设置为true！