Window对象

Window 对象表示浏览器中打开的窗口。

如果文档包含框架（或标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。</p> <p></p> <div class="image-package"> <div class="image-container" style="max-width: 15px; max-height: 15px;"> <div class="image-view"> </div> </div> <div class="image-caption"> Note </div> </div> <strong>注意：</strong> 没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。 <p></p> <hr> <h2>CONTENT</h2> <h3>Window 对象属性</h3> <table> <thead> <tr> <th>属性</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>closed</td> <td>返回窗口是否已被关闭。</td> </tr> <tr> <td>defaultStatus</td> <td>设置或返回窗口状态栏中的默认文本。</td> </tr> <tr> <td>document</td> <td>对 Document 对象的只读引用。(请参阅对象)</td> </tr> <tr> <td>frames</td> <td>返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。</td> </tr> <tr> <td>length</td> <td>设置或返回窗口中的框架数量。</td> </tr> <tr> <td>history</td> <td>对 History 对象的只读引用。请参数 History 对象。</td> </tr> <tr> <td>innerHeight</td> <td>返回窗口的文档显示区的高度。</td> </tr> <tr> <td>innerWidth</td> <td>返回窗口的文档显示区的宽度。</td> </tr> <tr> <td>outerHeight</td> <td>返回窗口的外部高度，包含工具条与滚动条。</td> </tr> <tr> <td>outerWidth</td> <td>返回窗口的外部宽度，包含工具条与滚动条。</td> </tr> <tr> <td>localStorage</td> <td>在浏览器中存储 key/value 对。没有过期时间。</td> </tr> <tr> <td>location</td> <td>用于窗口或框架的 Location 对象。请参阅 Location 对象。</td> </tr> <tr> <td>name</td> <td>设置或返回窗口的名称。</td> </tr> <tr> <td>navigator</td> <td>对 Navigator 对象的只读引用。请参数 Navigator 对象。</td> </tr> <tr> <td>opener</td> <td>返回对创建此窗口的窗口的引用。</td> </tr> <tr> <td>pageXOffset</td> <td>设置或返回当前页面相对于窗口显示区左上角的 X 位置。</td> </tr> <tr> <td>pageYOffset</td> <td>设置或返回当前页面相对于窗口显示区左上角的 Y 位置。</td> </tr> <tr> <td>screenX</td> <td>返回相对于屏幕窗口的x坐标</td> </tr> <tr> <td>screenY</td> <td>返回相对于屏幕窗口的y坐标</td> </tr> <tr> <td>parent</td> <td>返回父窗口。</td> </tr> <tr> <td>screen</td> <td>对 Screen 对象的只读引用。请参数 Screen 对象。</td> </tr> <tr> <td>screenLeft</td> <td>返回相对于屏幕窗口的x坐标</td> </tr> <tr> <td>screenTop</td> <td>返回相对于屏幕窗口的y坐标</td> </tr> <tr> <td>sessionStorage</td> <td>在浏览器中存储 key/value 对。在关闭窗口或标签页之后将会删除这些数据。</td> </tr> <tr> <td>self</td> <td>返回对当前窗口的引用。等价于 Window 属性。</td> </tr> <tr> <td>top</td> <td>返回最顶层的父窗口。</td> </tr> <tr> <td>status</td> <td>设置窗口状态栏的文本。</td> </tr> </tbody> </table> <h3>Window 对象方法</h3> <table> <thead> <tr> <th>方法</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>alert()</td> <td>显示带有一段消息和一个确认按钮的警告框。</td> </tr> <tr> <td>atob()</td> <td>解码一个 base-64 编码的字符串。</td> </tr> <tr> <td>btoa()</td> <td>创建一个 base-64 编码的字符串。</td> </tr> <tr> <td>blur()</td> <td>把键盘焦点从顶层窗口移开。</td> </tr> <tr> <td>setInterval()</td> <td>按照指定的周期（以毫秒计）来调用函数或计算表达式。</td> </tr> <tr> <td>setTimeout()</td> <td>在指定的毫秒数后调用函数或计算表达式。</td> </tr> <tr> <td>clearInterval()</td> <td>取消由 setInterval() 设置的 timeout。</td> </tr> <tr> <td>clearTimeout()</td> <td>取消由 setTimeout() 方法设置的 timeout。</td> </tr> <tr> <td>close()</td> <td>关闭浏览器窗口。</td> </tr> <tr> <td>confirm()</td> <td>显示带有一段消息以及确认按钮和取消按钮的对话框。</td> </tr> <tr> <td>createPopup()</td> <td>创建一个 pop-up 窗口。<strong>只有 IE 浏览器支持 createPopup() 方法，其他浏览器都不支持。</strong> </td> </tr> <tr> <td>focus()</td> <td>把键盘焦点给予一个窗口。</td> </tr> <tr> <td>getSelection()</td> <td>返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。</td> </tr> <tr> <td>getComputedStyle()</td> <td>获取指定元素的 CSS 样式。</td> </tr> <tr> <td>matchMedia()</td> <td>该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。</td> </tr> <tr> <td>moveBy()</td> <td>可相对窗口的当前坐标把它移动指定的像素。</td> </tr> <tr> <td>moveTo()</td> <td>把窗口的左上角移动到一个指定的坐标。</td> </tr> <tr> <td>open()</td> <td>打开一个新的浏览器窗口或查找一个已命名的窗口。</td> </tr> <tr> <td>print()</td> <td>打印当前窗口的内容。</td> </tr> <tr> <td>prompt()</td> <td>显示可提示用户输入的对话框。</td> </tr> <tr> <td>resizeBy()</td> <td>按照指定的像素调整窗口的大小。</td> </tr> <tr> <td>resizeTo()</td> <td>把窗口的大小调整到指定的宽度和高度。</td> </tr> <tr> <td>scroll()</td> <td>已废弃。该方法已经使用了 scrollTo()方法来替代。</td> </tr> <tr> <td>scrollBy()</td> <td>按照指定的像素值来滚动内容。</td> </tr> <tr> <td>scrollTo()</td> <td>把内容滚动到指定的坐标。</td> </tr> <tr> <td>stop()</td> <td>停止页面载入。</td> </tr> </tbody> </table> <hr> <h2>Window 对象属性</h2> <h3>closed</h3> <pre><code class="html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</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> </code></pre> <p><strong>语法</strong></p> <p><code>window.closed</code></p> <h3>defaultStatus</h3> <pre><code class="html"><html> <body> <script> window.defaultStatus="这是默认状态栏文本! !"; </script> </body> </html> </code></pre> <p><code>defaultStatus</code> 属性可设置或返回窗口状态栏中的默认文本。该属性可读可写。</p> <p>该文本会在页面加载时被显示。</p> <p><strong>语法</strong></p> <p><code>window.defaultStatus</code></p> <p><strong>浏览器支持</strong></p> <p>Safari</p> <p>♥ 注意： defaultStatus属性在IE，火狐，Chrome，和Safari默认配置是不能正常工作。要允许脚本来改变状态栏文本，用户必须把配置屏幕首选项设置为false dom.disable_window_status_change。（或在Firefox："工具 - 选项 - 内容 - 启用的JavaScript /"高级" - 允许脚本更改状态栏文本"）。</p> <h3>frameslength</h3> <pre><code class="html"> <button onclick="myFunction()">点我</button> <br><br> <iframe src="https://www.baidu.com">

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

该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架或 </code>。属性 frames.length 存放数组 frames[] 中含有的元素个数。注意，frames[] 数组中引用的框架可能还包括框架，它们自己也具有 frames[] 数组。</p> <p>♥ 提示：使用 <code>frames.length</code> 来获取框架的数量。</p> <p>♥ 注意:该属性也可用于 <code><frame></code> 元素，但是 HTML5 不支持 <code><frame></code> 元素。</p> <p>该属性是只读的。</p> <p><strong>语法</strong></p> <p><code>window.frames</code></p> <h3>innerHeightinnerWidthouterHeightouterWidth</h3> <pre><code class="js">var w1=window.innerWidth; var h1=window.innerHeight; var w2=window.outerWidth; var h2=window.outerHeight; console.log("innerWidth: " + w1 + " innerHeight: " + h1 +"outerWidth: " + w2 + " outerHeight: " + h2) // innerWidth: 1050 innerHeight: 969outerWidth: 1920 outerHeight: 1040 </code></pre> <p><strong>定义和用法</strong></p> <p><code>innerheight</code> 返回窗口的文档显示区的高度。</p> <p><code>innerwidth</code> 返回窗口的文档显示区的宽度。</p> <p><code>outerHeight</code> 属性设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条）。</p> <p><code>outerWidth</code> 属性设置或返回窗口的外部宽度，包括所有的界面元素（如工具栏/滚动）。</p> <p>♥ 注意：使用 <code>innerWidth</code> 和 <code>innerHeight</code> 属性获取去除工具条与滚动条的窗口高度与宽度。</p> <p>♥ 注意：使用 <code>outerWidth</code> 和 <code>outerHeight</code> 属性获取加上工具条与滚动条窗口的宽度与高度。</p> <p><strong>语法</strong></p> <p>Get:</p> <p><code>window.innerWidth</code></p> <p><code>window.innerHeight</code></p> <p><code>window.outerWidth</code></p> <p><code>window.outerHeight</code></p> <p>Set:</p> <p><code>window.innerWidth=pixels</code></p> <p><code>window.innerHeight=pixels</code></p> <p><code>window.outerWidth=pixels</code></p> <p><code>window.outerHeight=pixels</code></p> <h3>name</h3> <pre><code class="js">myWindow=window.open('','MsgWindow','width=200,height=100'); myWindow.document.write("<p>窗口名称为: " + myWindow.name + "</p>"); // 窗口名称为: MsgWindow </code></pre> <p><strong>定义和用法</strong></p> <p><code>name</code> 属性可设置或返回存放窗口的名称的一个字符串。</p> <p><strong>语法</strong></p> <p><code>window.name</code></p> <h3>openr</h3> <pre><code class="js">myWindow=window.open('','hhh','width=200,height=100'); myWindow.document.write("<p>这是我的窗口</p>"); // 新窗口：这是我的窗口 myWindow.focus(); myWindow.opener.document.write("<p>这个是源窗口!</p>"); // 源窗口：这个是源窗口! </code></pre> <p><strong>定义和用法</strong></p> <p><code>opener</code> 属性是一个可读可写的属性，可返回对创建该窗口的 Window 对象的引用。</p> <p>当使用window.open()打开一个窗口，您可以使用此属性返回来自目标窗口源（父）窗口的详细信息。</p> <p>代码提示： <code>window.opener.close()</code> 将关闭源（父）窗口。</p> <p><strong>语法</strong></p> <p><code>window.opener</code></p> <h3>pagexoffsetpageyoffset</h3> <pre><code class="js">window.scrollBy(100, 100); alert("pageXOffset: " + window.pageXOffset + ", pageYOffset: " + window.pageYOffset); // pageXOffset: 100, pageYOffset: 100 </code></pre> <p><strong>定义和用法</strong></p> <p><code>pageXOffset</code> 和 <code>pageYOffset</code> 属性返回文档在窗口左上角水平和垂直方向滚动的像素。</p> <p><code>pageXOffset</code> 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。</p> <p><code>pageXOffset</code> 和 <code>pageYOffset</code> 属性相等于 <code>scrollX</code> 和 <code>scrollY</code> 属性。</p> <p>这些属性是只读的。</p> <p><strong>语法</strong></p> <p><code>window.pageXOffset</code></p> <p><code>window.pageYOffset</code></p> <h3>screenxscreeny</h3> <pre><code class="js">myWindow=window.open('',''); myWindow.document.write("<p>This is 'myWindow'"); myWindow.document.write("<br>ScreenX: " + myWindow.screenX); myWindow.document.write("<br>ScreenY: " + myWindow.screenY + "</p>"); </code></pre> <p><strong>定义和用法</strong></p> <p><code>screenX</code> 和 <code>screenY</code> 属性返回窗口相对于屏幕的X和Y坐标。</p> <p><strong>语法</strong></p> <p><code>window.screenX</code></p> <p><code>window.screenY</code></p> <p>浏览器支持<br> Internet ExplorerFirefoxOperaGoogle ChromeSafari</p> <p>除了 Internet Explorer外，所有主要浏览器都支持screenX和screenY属性。</p> <p>♥ 注意： IE浏览器使用。 <code>window.screenLeft</code> 和 <code>window.screenTop</code> 获得相同的值</p> <h3>parent</h3> <pre><code class="js">var newwin = window.open('','','width=200,height=100'); alert(window.parent.location); // https://www.runoob.com/try/try.php?filename=tryjsref_win_parent </code></pre> <p><strong>定义和用法</strong></p> <p><code>parent</code> 属性返回当前窗口的父窗口。</p> <p><strong>语法</strong></p> <p><code>window.parent</code></p> <h3>screenleftscreentop</h3> <pre><code class="js">myWindow=window.open('',''); myWindow.document.write("<p>这是'我的窗口'"); myWindow.document.write("<br>ScreenLeft: " + myWindow.screenLeft); myWindow.document.write("<br>ScreenTop: " + myWindow.screenTop + "</p>"); /* 这是'我的窗口' ScreenLeft: 0 ScreenTop: 0 */ </code></pre> <p><strong>定义和用法</strong></p> <p><code>screenLeft</code> 和 <code>screenTop</code> 属性返回窗口相对于屏幕的X和Y坐标。</p> <p><strong>语法</strong></p> <p><code>window.screenLeft</code><br> <code>window.screenTop</code></p> <p><strong>浏览器支持</strong></p> <p>所有主流浏览器都支持 <code>screenLeft</code> 和 <code>screenTop</code> 属性，Firefox除外。</p> <p>♥ 注意： Firefox 浏览器请使用 <code>window.screenX</code> and <code>window.screenY</code>。</p> <h3>selftop</h3> <pre><code class="html"><script> function check(){ if (window.top!=window.self) { document.write("<p>这个窗口不是最顶层窗口!我在一个框架?</p>") } else{ document.write("<p>这个窗口是最顶层窗口!</p>") } } </script> <input type="button" onclick="check()" value="检查窗口">  </code></pre> <p><strong>定义和用法</strong></p> <p><code>self</code> 属性返回指向当前 window 对象的引用，利用这个属性，可以保证在多个窗口被打开的情况下，正确调用当前窗口内的函数或属性而不会发生混乱。</p> <p><code>self</code> 属性是只读的。</p> <p><code>top</code> 属性返回当前窗口的最顶层浏览器窗口。</p> <p><strong>语法</strong></p> <p><code>window.self</code></p> <p><code>window.top</code></p> <p>♥ 注： <code>window</code> 、 <code>self</code> 、 <code>window.self</code> 是等价的。</p> <h3>status</h3> <pre><code class="js">window.status="一些文本在状态栏!"; </code></pre> <p><strong>定义和用法</strong></p> <p><code>status</code> 属性可设置或返回窗口状态栏中的文本。</p> <p><strong>语法</strong></p> <p><code>window.status</code></p> <p><strong>浏览器支持</strong></p> <p>♥ 注意： <code>status</code> 属性在IE，火狐，Chrome，和Safari默认配置是不能正常工作。要允许脚本来改变状态栏文本，用户必须把配置屏幕首选项设置为false dom.disable_window_status_change。（或在Firefox："工具 - 选项 - 内容 - 启用的JavaScript /"高级" - 允许脚本更改状态栏文本"）。</p> <h2>Window对象方法</h2> <h3>atobbtoa</h3> <pre><code class="js">var str = "RUNOOB"; var enc = window.btoa(str); // 编码字符串为: UlVOT09C var dec = window.atob(enc); // 解码后字符串为: RUNOOB </code></pre> <p><strong>定义和用法</strong></p> <p><code>atob()</code> 方法用于解码使用 base-64 编码的字符串。</p> <p><code>btoa()</code> 方法用于创建一个 base-64 编码的字符串。</p> <p>该方法使用 "A-Z", "a-z", "0-9", "+", "/" 和 "=" 字符来编码字符串。</p> <p><strong>语法</strong></p> <p><code>window.atob(encodedStr)</code></p> <p><code>window.btoa(str)</code></p> <h3>setclear</h3> <pre><code class="html"><p>显示当前时间:</p> <p id="demo"></p> <button onclick="myStopFunction()">停止时间</button> <script> var myVar = setInterval(function(){ myTimer() }, 1000); function myTimer() { var d = new Date(); var t = d.toLocaleTimeString(); document.getElementById("demo").innerHTML = t; } function myStopFunction() { clearInterval(myVar); } </script> </code></pre> <pre><code class="html"><body> <p>点击按钮，等待 3 秒后弹出 "Hello" 。</p> <p>点击第二个按钮来阻止弹出函数 myFunction 的执行。 (你必须在 3 秒前点击)</p> <button onclick="myFunction()">先点我</button> <button onclick="myStopFunction()">阻止弹出</button> <script> var myVar; function myFunction() { myVar = setTimeout(function(){ alert("Hello") }, 3000); } function myStopFunction() { clearTimeout(myVar); } </script> </body> </code></pre> <p><strong>定义和用法</strong></p> <p>①</p> <p><code>setInterval()</code> 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。</p> <p><code>setInterval()</code> 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。</p> <p>♥ 提示： 1000 毫秒= 1 秒。</p> <p>♥ 提示：如果你只想执行一次可以使用 setTimeout() 方法。</p> <p>②</p> <p><code>clearInterval()</code> 方法可取消由 setInterval() 函数设定的定时执行操作。</p> <p><code>clearInterval()</code> 方法的参数必须是由 setInterval() 返回的 ID 值。</p> <p>注意: 要使用 clearInterval() 方法, 在创建执行定时操作时要使用全局变量：</p> <p>myVar = setInterval("javascript 函数", milliseconds);</p> <p>可以通过 clearInterval(myVar) 方法来停止执行。</p> <p>③</p> <p><code>setTimeout()</code> 方法用于在指定的毫秒数后调用函数或计算表达式。</p> <p>♥ 提示： 1000 毫秒= 1 秒。</p> <p>♥ 提示：如果你只想重复执行可以使用 setInterval() 方法。</p> <p>♥ 提示：使用 clearTimeout() 方法来阻止函数的执行。</p> <p>④</p> <p>clearTimeout() 方法可取消由 setTimeout() 方法设置的定时操作。</p> <p>clearTimeout() 方法的参数必须是由 setTimeout() 返回的 ID 值。</p> <p>♥ 注意: 要使用 clearTimeout() 方法, 在创建执行定时操作时要使用全局变量：</p> <p>myVar = setTimeout("javascript function", milliseconds);</p> <p><strong>语法</strong></p> <p>①</p> <p><code>setInterval(code, milliseconds);</code></p> <p><code>setInterval(function, milliseconds, param1, param2, ...)</code></p> <table> <thead> <tr> <th>参数</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>code/function</td> <td>必需。要调用一个代码串，也可以是一个函数。</td> </tr> <tr> <td>milliseconds</td> <td>必须。周期性执行或调用 code/function 之间的时间间隔，以毫秒计。</td> </tr> <tr> <td>param1, param2, ...</td> <td>可选。传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。</td> </tr> </tbody> </table> <p>②</p> <p><code>clearInterval(id_of_setinterval)</code></p> <table> <thead> <tr> <th>参数</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>id_of_setinterval</td> <td>调用 setInterval() 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setInterval() 所设定的定时执行操作。</td> </tr> </tbody> </table> <p>③</p> <p><code>setTimeout(code, milliseconds, param1, param2, ...)</code></p> <p><code>setTimeout(function, milliseconds, param1, param2, ...)</code></p> <table> <thead> <tr> <th>参数</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>code/function</td> <td>必需。要调用一个代码串，也可以是一个函数。</td> </tr> <tr> <td>milliseconds</td> <td>可选。执行或调用 code/function 需要等待的时间，以毫秒计。默认为 0。</td> </tr> <tr> <td>param1, param2, ...</td> <td>可选。传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。</td> </tr> </tbody> </table> <p>④</p> <p><code>clearTimeout(id_of_settimeout)</code></p> <table> <thead> <tr> <th>参数</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>id_of_setinterval</td> <td>调用 setTimeout() 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setTimeout() 所设定的定时执行操作。</td> </tr> </tbody> </table> <h3>close</h3> <pre><code class="html"><script> function openWin(){ myWindow=window.open("","","width=200,height=100"); myWindow.document.write("<p>这是'我的窗口'</p>"); } function closeWin(){ myWindow.close(); } </script> </head> <body> <input type="button" value="打开我的窗口" onclick="openWin()" /> <input type="button" value="关闭我的窗口" onclick="closeWin()" /> </body> </code></pre> <h3>confirm</h3> <pre><code class="html"><body> <p>点击按钮，显示确认框。</p> <button onclick="myFunction()">点我</button> <p id="demo"></p> <script> function myFunction(){ var x; var r=confirm("按下按钮!"); if (r==true){ x="你按下了\"确定\"按钮!"; } else{ x="你按下了\"取消\"按钮!"; } document.getElementById("demo").innerHTML=x; } </script> </body> </code></pre> <p><strong>定义和用法</strong></p> <p><code>confirm()</code> 方法用于显示一个带有指定消息和确认及取消按钮的对话框。</p> <p>如果访问者点击"确定"，此方法返回true，否则返回false。</p> <p><strong>语法</strong></p> <p><code>confirm(message)</code></p> <h3>focus</h3> <pre><code class="html"><script> function openWin(){ myWindow=window.open('','','width=200,height=100'); myWindow.document.write("<p>这是'我的窗口'</p>"); myWindow.focus(); } </script> <body> <input type="button" value="打开窗口" onclick="openWin()" /> </body> </code></pre> <p><strong>定义和用法</strong></p> <p><code>focus()</code> 方法可把键盘焦点给予一个窗口。</p> <p><strong>语法</strong></p> <p><code>window.focus()</code></p> <h3>getcomputedstyle</h3> <pre><code class="html"><p>点击按钮计算 DIV 的背景颜色。</p> <p><button onclick="myFunction()">点我</button></p> <div id="test" style="height: 50px;background-color: rgb(178, 116, 230);">测试 DIV</div> <p>计算值为: <span id="demo"></span></p> <script> function myFunction(){ var elem = document.getElementById("test"); var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color"); document.getElementById("demo").innerHTML = theCSSprop; } </code></pre> <p><strong>定义和用法</strong></p> <p><code>getComputedStyle()</code> 方法用于获取指定元素的 CSS 样式。</p> <p>获取的样式是元素在浏览器中最终渲染效果的样式。</p> <p><strong>语法</strong></p> <p><code>window.getComputedStyle(element, pseudoElement)</code></p> <table> <thead> <tr> <th>参数</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>element</td> <td>必需，要获取样式的元素。</td> </tr> <tr> <td>pseudoElement</td> <td>可选，伪类元素，当不查询伪类元素的时候可以忽略或者传入 null。</td> </tr> </tbody> </table> <p><strong>返回值</strong></p> <p>返回的对象是 CSSStyleDeclaration 类型的对象。</p> <h3>matchmedia</h3> <pre><code class="html"><p>判断屏幕（screen/viewport）窗口大小。</p> <button onclick="myFunction()">点我</button> <p id="demo"></p> <script> function myFunction() { var x = document.getElementById("demo"); if (window.matchMedia("(max-width: 700px)").matches) { x.innerHTML = "窗口小于或等于 700 像素"; } else { x.innerHTML = "窗口大于 700 像素"; } } </script> </code></pre> <p><strong>定义和用法</strong></p> <p><code>matchMedia()</code> 返回一个新的 MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果。</p> <p><code>matchMedia()</code> 方法的值可以是任何一个 CSS @media 规则的特性, 如 min-height, min-width, orientation 等。</p> <p>MediaQueryList 对象有以下两个属性：</p> <p><code>media</code>：查询语句的内容。</p> <p><code>matches</code>：用于检测查询结果，如果文档匹配 media query 列表，值为 true，否则为 false。<br> MediaQueryList 对象还可以监听事件。通过监听，在查询结果发生变化时，就调用指定的回调函数。</p> <table> <thead> <tr> <th>方法</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>addListener(functionref)</td> <td>添加一个新的监听器函数，该函数在媒体查询的结果发生变化时执行。</td> </tr> <tr> <td>removeListener(functionref)</td> <td>从媒体查询列表中删除之前添加的监听器。如果指定的监听器不在列表中，则不执行任何操作。</td> </tr> </tbody> </table> <p><strong>语法</strong></p> <p><code>window.matchMedia(mediaQueryString)</code></p> <table> <thead> <tr> <th>参数</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>mediaQueryString</td> <td>必需，一个字符串，表示即将返回一个新 MediaQueryList 对象的媒体查询。</td> </tr> </tbody> </table> <p><strong>返回值</strong></p> <p>返回 MediaQueryList 对象。</p> <h3>movebymoveto</h3> <pre><code class="html"><script> function openWin(){ myWindow=window.open('','我的窗口','width=200,height=100'); myWindow.document.write("<p>这是我的窗口</p>"); } function movebyWin(){ myWindow.moveBy(250,250); // 相对移动 myWindow.focus(); } function movetoWin(){ myWindow.moveTo(100,100); // 移到指定位置 myWindow.focus(); } </script> <body> <input type="button" value="打开我的窗口" onclick="openWin()" /> <br><br> <input type="button" value="移动我的窗口" onclick="movebyWin()" /> <input type="button" value="移动我的窗口" onclick="movetoWin()" /> </body> </code></pre> <p><strong>定义和用法</strong></p> <p><code>moveBy()</code> 方法可相对窗口的当前坐标把它移动指定的像素。</p> <p><code>moveTo()</code> 方法可把窗口的左上角移动到一个指定的坐标。</p> <p><strong>语法</strong></p> <p><code>window.moveBy(x,y)</code></p> <p><code>window.moveTo(x,y)</code></p> <h3>open</h3> <pre><code class="js">myWindow=window.open('','MsgWindow','width=200,height=100'); myWindow.document.write("<p>窗口名称为: " + myWindow.name + "</p>"); // 窗口名称为: MsgWindow </code></pre> <p><strong>定义和用法</strong></p> <p><code>open()</code> 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。</p> <p><strong>语法</strong></p> <p><code>window.open(URL,name,specs,replace)</code></p> <table> <thead> <tr> <th>参数</th> <th>说明</th> <th></th> </tr> </thead> <tbody> <tr> <td>URL</td> <td>可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口</td> </tr> <tr> <td>name</td> <td>可选。指定target属性或窗口的名称。支持以下值：</td> </tr> <tr> <td></td> <td>* _blank - URL加载到一个新的窗口。这是默认</td> </tr> <tr> <td></td> <td>* _parent - URL加载到父框架</td> </tr> <tr> <td></td> <td>* _self - URL替换当前页面</td> </tr> <tr> <td></td> <td>* _top - URL替换任何可加载的框架集</td> </tr> <tr> <td></td> <td>* <em>name</em> - 窗口名称</td> </tr> <tr> <td>specs</td> <td>可选。一个逗号分隔的项目列表。支持以下值：</td> </tr> <tr> <td></td> <td>channelmode=yes</td> <td>是否要在影院模式显示 window。默认是没有的。仅限IE浏览器</td> </tr> <tr> <td></td> <td>directories=yes</td> <td>是否添加目录按钮。默认是肯定的。仅限IE浏览器</td> </tr> <tr> <td></td> <td>fullscreen=yes</td> <td>浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器</td> </tr> <tr> <td></td> <td>height=pixels</td> <td>窗口的高度。最小.值为100</td> </tr> <tr> <td></td> <td>left=pixels</td> <td>该窗口的左侧位置</td> </tr> <tr> <td></td> <td>location=yes</td> <td>是否显示地址字段.默认值是yes</td> </tr> <tr> <td></td> <td>menubar=yes</td> <td>是否显示菜单栏.默认值是yes</td> </tr> <tr> <td></td> <td>resizable=yes</td> <td>是否可调整窗口大小.默认值是yes</td> </tr> <tr> <td></td> <td>scrollbars=yes</td> <td>是否显示滚动条.默认值是yes</td> </tr> <tr> <td></td> <td>status=yes</td> <td>是否要添加一个状态栏.默认值是yes</td> </tr> <tr> <td></td> <td>titlebar=yes</td> <td>是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes</td> </tr> <tr> <td></td> <td>toolbar=yes</td> <td>是否显示浏览器工具栏.默认值是yes</td> </tr> <tr> <td></td> <td>top=pixels</td> <td>窗口顶部的位置.仅限IE浏览器</td> </tr> <tr> <td></td> <td>width=pixels</td> <td>窗口的宽度.最小.值为100</td> </tr> <tr> <td>replace</td> <td>Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：</td> </tr> <tr> <td></td> <td>* true - URL 替换浏览历史中的当前条目。</td> </tr> <tr> <td></td> <td>* false - URL 在浏览历史中创建新的条目。</td> </tr> </tbody> </table> <h3>print</h3> <pre><code class="js">// 打印当前页： function printpage(){ window.print(); } </code></pre> <p><strong>定义和用法</strong></p> <p><code>print()</code> 方法用于打印当前窗口的内容。</p> <p><strong>语法</strong></p> <p><code>window.print()</code></p> <h3>prompt</h3> <pre><code class="html"><body> <p>点击按钮查看输入的对话框。</p> <button onclick="myFunction()">点我</button> <p id="demo"></p> <script> function myFunction(){ var x; var person=prompt("请输入你的名字","Harry Potter"); if (person!=null && person!=""){ x="你好 " + person + "! 今天感觉如何?"; document.getElementById("demo").innerHTML=x; } } </script> </body> </code></pre> <p><strong>定义和用法</strong></p> <p><code>prompt()</code> 方法用于显示可提示用户进行输入的对话框。</p> <p>这个方法返回用户输入的字符串。</p> <p><strong>语法</strong></p> <p><code>prompt(msg,defaultText)</code></p> <table> <thead> <tr> <th>参数</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>msg</td> <td>可选。要在对话框中显示的纯文本（而不是 HTML 格式的文本）。</td> </tr> <tr> <td>defaultText</td> <td>可选。默认的输入文本。</td> </tr> </tbody> </table> <h3>resizebyto</h3> <pre><code class="html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script> var w; function openwindow(){ w=window.open('','', 'width=100,height=100'); w.focus(); } function resizeWindow(){ w.top.resizeBy(100,100); } function myFunction(){ w.resizeTo(500,500); w.focus(); } </script> </head> <body> <button onclick="openwindow()">创建窗口</button> <button onclick="resizeWindow()">调整窗口</button> <button onclick="myFunction()">调整窗口</button> </body> </html> </code></pre> <p><strong>定义和用法</strong></p> <p><code>resizeBy()</code> 方法用于根据指定的像素来调整窗口的大小。</p> <p>♥ 注意：此方法定义指定窗口的右下角角落移动的像素，左上角将不会被移动(它停留在其原来的坐标).</p> <p><code>resizeTo</code> 方法用于把窗口大小调整为指定的宽度和高度。</p> <p><strong>语法</strong></p> <p><code>resizeBy(width,height)</code></p> <table> <thead> <tr> <th>参数</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>width</td> <td>必需。要使窗口宽度增加的像素数。可以是正、负数值。</td> </tr> <tr> <td>height</td> <td>可选。要使窗口高度增加的像素数。可以是正、负数值。</td> </tr> </tbody> </table> <p><code>window.resizeTo(width,height)</code></p> <table> <thead> <tr> <th>参数</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>width</td> <td>必需的。设置窗口的宽度，以像素为单位</td> </tr> <tr> <td>height</td> <td>必需的。设置窗口的高度，以像素为单位</td> </tr> </tbody> </table> <p><strong>浏览器支持</strong></p> <p>所有主要浏览器都支持 <code>resizeBy()</code> 方法，除了Opera和Chrome。</p> <p>所有主要浏览器都支持 <code>resizeTo()</code> 方法</p> <p>从 Firefox 7 开始，不能改变浏览器窗口的大小了，要依据下面的规则：</p> <p>不能设置那些不是通过 window.open 创建的窗口或 Tab 的大小。</p> <p>当一个窗口里面含有一个以上的 Tab 时，无法设置窗口的大小。</p> <h3>scrollbyto</h3> <pre><code class="html"><script> function scrollByWindow(){ window.scrollBy(100,100); } function scrollToWindow(){ window.scrollTo(100,100); } </script> <body> <input type="button" onclick="scrollByWindow()" value="滚动条" /> <input type="button" onclick="scrollToWindow()" 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> </code></pre> <p><strong>定义和用法</strong></p> <p><code>scrollBy()</code> 方法可把内容滚动指定的像素数。</p> <p><code>scrollTo()</code> 方法可把内容滚动到指定的坐标。</p> <p>♥ 注意：要使此方法工作 window 滚动条的可见属性必须设置为true！</p> <p><strong>语法</strong></p> <p><code>scrollBy(xnum,ynum)</code></p> <table> <thead> <tr> <th>参数</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>xnum</td> <td>必需。把文档向右滚动的像素数。</td> </tr> <tr> <td>ynum</td> <td>必需。把文档向下滚动的像素数。</td> </tr> </tbody> </table> <p><code>scrollTo(xpos,ypos)</code></p> <table> <thead> <tr> <th>参数</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>xpos</td> <td>必需。要在窗口文档显示区左上角显示的文档的 x 坐标。</td> </tr> <tr> <td>ypos</td> <td>必需。要在窗口文档显示区左上角显示的文档的 y 坐标。</td> </tr> </tbody> </table> <h3>stop</h3> <pre><code class="html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script> window.stop(); </script> </head> <body> <p>stop() 方法阻止了 iframe 页面的载入。</p> <p><b>注意:</b> Internet Explorer 浏览器不支持该方法。</p> <iframe src="https://www.runoob.com">

定义和用法

stop() 方法用于停止页面载入。

该方法类似在浏览器上点击停止载入按钮。

如果页面在载入图片或框架(iframe)时间过长，我门可以使用该方法来停止载入。

没有返回值。

语法

window.stop()

Window对象

Window对象

你可能感兴趣的:(Window对象)