Window: open() 方法

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

Window 接口的 open() 方法将指定资源加载到一个新的或现有的浏览上下文（即选项卡、窗口或 </code>）中，并给定一个指定名称。</p> </section> </div> <aside class="reference-layout__toc"> <nav class="reference-toc"> <h2>本文内容</h2> <ul> <li><a href="#syntax">语法</a></li><li><a href="#description">描述</a></li><li><a href="#examples">示例</a></li><li><a href="#progressive_enhancement">渐进增强</a></li><li><a href="#same-origin_policy">同源策略</a></li><li><a href="#accessibility_concerns">可访问性考虑</a></li><li><a href="#specifications">规范</a></li><li><a href="#browser_compatibility">浏览器兼容性</a></li><li><a href="#see_also">另见</a></li> </ul> </nav> <mdn-placement-sidebar></mdn-placement-sidebar> </aside> <div class="reference-layout__body"> <section class="content-section" aria-labelledby="syntax"> <h2 id="syntax" class="heading"><a class="heading-anchor" href="#syntax">语法</a></h2> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>open() open(url) open(url, target) open(url, target, windowFeatures) </code></pre></div> </section><section class="content-section" aria-labelledby="parameters"> <h3 id="parameters" class="heading"><a class="heading-anchor" href="#parameters">参数</a></h3> <dl> <dt id="url"><a href="#url"><code>url</code> <span class="badge inline optional">可选</span></a></dt> <dd> <p>一个字符串，表示要加载资源的 URL 或路径。如果指定空字符串（<code>""</code>）或省略此参数，则在目标浏览上下文中打开一个空白页面。</p> </dd> <dt id="target"><a href="#target"><code>target</code> <span class="badge inline optional">可选</span></a></dt> <dd> <p>一个不含空格的字符串，指定资源加载到的浏览上下文的 <a href="/en-US/docs/Web/API/Window/name">名称</a>。如果该名称未识别出现有上下文，则会创建一个新上下文并赋予指定的名称。还可以使用特殊的 <a href="/en-US/docs/Web/HTML/Reference/Elements/a#target"><code>target</code> 关键字</a>，如 <code>_self</code>、<code>_blank</code>（默认）、<code>_parent</code>、<code>_top</code> 和 <code>_unfencedTop</code>。<code>_unfencedTop</code> 仅与 <a href="/en-US/docs/Web/API/Fenced_frame_API">Fenced Frames</a> 相关。</p> <p>此名称可用作 <code><a></code> 或 <code><form></code> 元素的 <code>target</code> 属性。</p> </dd> <dt id="windowfeatures"><a href="#windowfeatures"><code>windowFeatures</code> <span class="badge inline optional">可选</span></a></dt> <dd> <p>一个字符串，包含以 <code>name=value</code> 形式表示的逗号分隔的窗口特性列表。布尔值可以通过以下方式设置为 true：<code>name</code>、<code>name=yes</code>、<code>name=true</code> 或 <code>name=n</code>（其中 <code>n</code> 是任何非零整数）。这些特性包括窗口的默认大小和位置、是否打开最小化弹出窗口等选项。支持以下选项：</p> <dl> <dt id="attributionsrc"><a href="#attributionsrc"><code>attributionsrc</code> <abbr class="icon icon-experimental" title="实验性。未来行为可能会改变。"> <span class="visually-hidden">实验性</span> </abbr></a></dt> <dd> <p>表示您希望浏览器在 <code>open()</code> 调用中发送 <a href="/en-US/docs/Web/HTTP/Reference/Headers/Attribution-Reporting-Eligible"><code>Attribution-Reporting-Eligible</code></a> 标头。此调用必须在用户交互事件处理程序（例如 <code>click</code>）内，并在用户交互后的五秒内通过<a href="/en-US/docs/Glossary/Transient_activation">瞬时激活</a>完成。在服务器端，这用于触发在响应中发送 <a href="/en-US/docs/Web/HTTP/Reference/Headers/Attribution-Reporting-Register-Source"><code>Attribution-Reporting-Register-Source</code></a> 标头，以完成归因源的注册。</p> <p>此外，当 <code>open()</code> 方法完成时，浏览器还会触发存储相关联的源数据（如 <a href="/en-US/docs/Web/HTTP/Reference/Headers/Attribution-Reporting-Register-Source"><code>Attribution-Reporting-Register-Source</code></a> 响应头中提供）。</p> <p>有关更多详细信息，请参阅 <a href="/en-US/docs/Web/API/Attribution_Reporting_API">归因报告 API</a>。</p> <div class="notecard note"> <p><strong>注意：</strong> <code>open()</code> 调用不能用于注册归因触发器。</p> </div> </dd> <dt id="popup"><a href="#popup"><code>popup</code></a></dt> <dd> <p>默认情况下，<code>window.open</code> 在新标签页中打开页面。如果 <code>popup</code> 设置为 true，它会请求使用一个最小化的弹出窗口。弹出窗口中包含的用户界面功能将由浏览器自动决定，通常只包括一个地址栏。如果 <code>popup</code> 存在并设置为 false，仍然会打开一个新标签页。</p> <p>有一些遗留特性曾用于控制打开窗口的 UI 功能。在现代浏览器中，它们仅具有请求弹出窗口的效果。如果 <code>popup</code> 未指定，并且 <code>windowFeatures</code> 包含除 <code>noopener</code>、<code>noreferrer</code> 或 <code>attributionsrc</code> 之外的任何特性（包括无法识别的特性），则如果满足以下任何条件，窗口也会作为弹出窗口打开：</p> <ul> <li><code>location</code> 和 <code>toolbar</code> 都为 false 或缺失</li> <li><code>menubar</code> 为 false 或缺失</li> <li><code>resizable</code> 为 false</li> <li><code>scrollbars</code> 为 false 或缺失</li> <li><code>status</code> 为 false 或缺失</li> </ul> <p>否则，窗口将作为标签页打开。</p> </dd> <dt id="width"><a href="#width"><code>width</code> 或 <code>innerWidth</code></a></dt> <dd> <p>指定内容区域的宽度，包括滚动条。所需最小值为 100。</p> </dd> <dt id="height"><a href="#height"><code>height</code> 或 <code>innerHeight</code></a></dt> <dd> <p>指定内容区域的高度，包括滚动条。所需最小值为 100。</p> </dd> <dt id="left"><a href="#left"><code>left</code> 或 <code>screenX</code></a></dt> <dd> <p>指定新窗口在用户操作系统定义的工作区左侧的像素距离。</p> </dd> <dt id="top"><a href="#top"><code>top</code> 或 <code>screenY</code></a></dt> <dd> <p>指定新窗口在用户操作系统定义的工作区顶部的像素距离。</p> </dd> <dt id="noopener"><a href="#noopener"><code>noopener</code></a></dt> <dd> <p>如果设置此特性，新窗口将无法通过 <a href="/en-US/docs/Web/API/Window/opener"><code>Window.opener</code></a> 访问源窗口，并返回 <code>null</code>。</p> <p>当使用 <code>noopener</code> 时，除了 <code>_top</code>、<code>_self</code> 和 <code>_parent</code> 之外的非空目标名称，在决定是否打开新的浏览上下文时，都会被视为 <code>_blank</code>。</p> </dd> <dt id="noreferrer"><a href="#noreferrer"><code>noreferrer</code></a></dt> <dd> <p>如果设置此特性，浏览器将省略 <a href="/en-US/docs/Web/HTTP/Reference/Headers/Referer"><code>Referer</code></a> 标头，并将 <code>noopener</code> 设置为 true。有关更多信息，请参阅 <a href="/en-US/docs/Web/HTML/Reference/Attributes/rel/noreferrer"><code>rel="noreferrer"</code></a>。</p> </dd> </dl> <p><code>null</code> 值被视为与空字符串（<code>""</code>）相同。</p> </dd> </dl> <div class="notecard note"> <p><strong>注意：</strong> 如果 <code>windowFeatures</code> 中请求的任何位置（<code>top</code>、<code>left</code>）和尺寸（<code>width</code>、<code>height</code>）值不允许整个浏览器弹出窗口在用户操作系统的应用程序工作区内渲染，则这些值<strong>将被修正</strong>。换句话说，新弹出窗口的任何部分都不能初始定位在屏幕外。</p> </div> </section><section class="content-section" aria-labelledby="return_value"> <h3 id="return_value" class="heading"><a class="heading-anchor" href="#return_value">返回值</a></h3> <p>如果浏览器成功打开新的浏览上下文，则返回一个 <a href="/en-US/docs/Glossary/WindowProxy"><code>WindowProxy</code></a> 对象。只要符合<a href="/en-US/docs/Web/Security/Same-origin_policy">同源策略</a>安全要求，返回的引用就可用于访问新上下文的属性和方法。</p> <p>如果使用 <a href="/en-US/docs/Web/HTTP/Reference/Headers/Cross-Origin-Opener-Policy"><code>Cross-Origin-Opener-Policy</code></a> HTTP 标头，并且文档策略使文档在新<a href="/en-US/docs/Glossary/Browsing_context">浏览上下文组</a>中打开，则对已打开窗口的引用将被切断，并且返回的对象将指示已打开窗口已关闭（<a href="/en-US/docs/Web/API/Window/closed" title="closed"><code>closed</code></a> 为 <code>true</code>）。</p> <p>如果浏览器无法打开新的浏览上下文，例如因为它被浏览器弹出窗口阻止程序阻止，则返回 <code>null</code>。</p> </section><section class="content-section" aria-labelledby="description"> <h2 id="description" class="heading"><a class="heading-anchor" href="#description">描述</a></h2> <p><code>Window</code> 接口的 <code>open()</code> 方法将 URL 作为参数，并将其标识的资源加载到新的或现有的选项卡或窗口中。<code>target</code> 参数确定将资源加载到哪个窗口或选项卡中，而 <code>windowFeatures</code> 参数可用于控制打开具有最小 UI 功能的新弹出窗口，并控制其大小和位置。</p> <p>远程 URL 不会立即加载。当 <code>window.open()</code> 返回时，窗口总是包含 <code>about:blank</code>。URL 的实际获取被推迟，并在当前脚本块执行完成后开始。窗口创建和引用资源的加载是异步完成的。</p> <p>现代浏览器有严格的弹出窗口阻止策略。弹出窗口必须直接响应用户输入而打开，并且每次 <code>Window.open()</code> 调用都需要单独的用户手势事件。这可以防止网站向用户发送大量窗口。然而，这给多窗口应用程序带来了问题。为了解决这个限制，您可以设计您的应用程序以：</p> <ul> <li>一次最多打开一个新窗口。</li> <li>重用现有窗口以显示不同的页面。</li> <li>建议用户如何更新浏览器设置以允许打开多个窗口。</li> </ul> </section><section class="content-section" aria-labelledby="examples"> <h2 id="examples" class="heading"><a class="heading-anchor" href="#examples">示例</a></h2>  </section><section class="content-section" aria-labelledby="opening_a_new_tab"> <h3 id="opening_a_new_tab" class="heading"><a class="heading-anchor" href="#opening_a_new_tab">打开新标签页</a></h3> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>window.open("https://www.mozilla.org/", "mozillaTab"); </code></pre></div> </section><section class="content-section" aria-labelledby="opening_a_popup"> <h3 id="opening_a_popup" class="heading"><a class="heading-anchor" href="#opening_a_popup">打开弹出窗口</a></h3> <p>另外，以下示例演示了如何使用 <code>popup</code> 特性打开弹出窗口。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>window.open("https://www.mozilla.org/", "mozillaWindow", "popup"); </code></pre></div> <p>可以控制新弹出窗口的大小和位置</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const windowFeatures = "left=100,top=100,width=320,height=320"; const handle = window.open( "https://www.mozilla.org/", "mozillaWindow", windowFeatures, ); if (!handle) { // The window wasn't allowed to open // This is likely caused by built-in popup blockers. // … } </code></pre></div> </section><section class="content-section" aria-labelledby="progressive_enhancement"> <h2 id="progressive_enhancement" class="heading"><a class="heading-anchor" href="#progressive_enhancement">渐进增强</a></h2> <p>在某些情况下，JavaScript 被禁用或不可用，并且 <code>window.open()</code> 将不起作用。我们不应仅仅依赖此功能的存在，而应提供替代解决方案，以使网站或应用程序仍然能够运行。</p> </section><section class="content-section" aria-labelledby="provide_alternative_ways_when_javascript_is_disabled"> <h3 id="provide_alternative_ways_when_javascript_is_disabled" class="heading"><a class="heading-anchor" href="#provide_alternative_ways_when_javascript_is_disabled">当 JavaScript 被禁用时提供替代方法</a></h3> <p>如果 JavaScript 支持被禁用或不存在，则用户代理将相应地创建一个辅助窗口，或根据其对 <code>target</code> 属性的处理来渲染引用的资源。目标和想法是为用户提供（而不是<em>强加</em>）一种打开引用资源的方式。</p> <h4 id="html">HTML</h4> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><a href="https://www.wikipedia.org/" target="OpenWikipediaWindow"> Wikipedia, a free encyclopedia (opens in another, possibly already existing, tab) </a> </code></pre></div> <h4 id="javascript">JavaScript</h4> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let windowObjectReference = null; // global variable function openRequestedTab(url, windowName) { if (windowObjectReference === null || windowObjectReference.closed) { windowObjectReference = window.open(url, windowName); } else { windowObjectReference.focus(); } } const link = document.querySelector("a[target='OpenWikipediaWindow']"); link.addEventListener("click", (event) => { openRequestedTab(link.href); event.preventDefault(); }); </code></pre></div> <p>以上代码解决了与链接打开弹出窗口相关的一些可用性问题。代码中 <code>event.preventDefault()</code> 的目的是取消链接的默认动作：如果执行了 <code>click</code> 事件监听器，则无需执行链接的默认动作。但如果用户的浏览器禁用或不存在 JavaScript 支持，则 <code>click</code> 事件监听器将被忽略，浏览器将在名为 <code>"WikipediaWindowName"</code> 的目标框架或窗口中加载引用的资源。如果没有框架或窗口名为 <code>"WikipediaWindowName"</code>，则浏览器将创建一个新窗口并将其命名为 <code>"WikipediaWindowName"</code>。</p> <div class="notecard note"> <p><strong>注意：</strong> 有关 <code>target</code> 属性的更多详细信息，请参阅 <code><a></code> 或 <code><form></code>。</p> </div> </section><section class="content-section" aria-labelledby="reuse_existing_windows_and_avoid_target_blank"> <h3 id="reuse_existing_windows_and_avoid_target_blank" class="heading"><a class="heading-anchor" href="#reuse_existing_windows_and_avoid_target_blank">重用现有窗口并避免使用 <code>target="_blank"</code></a></h3> <p>使用 <code>"_blank"</code> 作为 target 属性值会在用户桌面上创建多个新的、未命名的窗口，这些窗口无法回收或重用。尝试为您的 <code>target</code> 属性提供一个有意义的名称，并在您的页面上重用该 <code>target</code> 属性，以便单击另一个链接可以将引用的资源加载到已经创建和渲染的窗口中（从而加快用户处理速度），从而证明创建辅助窗口的理由（以及用户系统资源、花费的时间）。使用单个 <code>target</code> 属性值并在链接中重用它对用户资源更友好，因为它只创建一个可回收的辅助窗口。</p> <p>这是一个辅助窗口可以打开并用于其他链接的示例：</p> <h4 id="html_2">HTML</h4> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><p> <a href="https://www.wikipedia.org/" target="SingleSecondaryWindowName"> Wikipedia, a free encyclopedia (opens in another, possibly already existing, tab) </a> </p> <p> <a href="https://support.mozilla.org/products/firefox" target="SingleSecondaryWindowName"> Firefox FAQ (opens in another, possibly already existing, tab) </a> </p> </code></pre></div> <h4 id="javascript_2">JavaScript</h4> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let windowObjectReference = null; // global variable let previousURL; /* global variable that will store the url currently in the secondary window */ function openRequestedSingleTab(url) { if (windowObjectReference === null || windowObjectReference.closed) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); } else if (previousURL !== url) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); /* if the resource to load is different, then we load it in the already opened secondary window and then we bring such window back on top/in front of its parent window. */ windowObjectReference.focus(); } else { windowObjectReference.focus(); } previousURL = url; /* explanation: we store the current url in order to compare url in the event of another call of this function. */ } const links = document.querySelectorAll( "a[target='SingleSecondaryWindowName']", ); for (const link of links) { link.addEventListener("click", (event) => { openRequestedSingleTab(link.href); event.preventDefault(); }); } </code></pre></div> </section><section class="content-section" aria-labelledby="same-origin_policy"> <h2 id="same-origin_policy" class="heading"><a class="heading-anchor" href="#same-origin_policy">同源策略</a></h2> <p>如果新打开的浏览上下文不共享相同的<a href="/en-US/docs/Glossary/Origin">源</a>，则打开脚本将无法与该浏览上下文的内容交互（读取或写入）。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js example-bad notranslate"><code>// Script from example.com const otherOriginContext = window.open("https://example.org"); // example.com and example.org are not the same origin console.log(otherOriginContext.origin); // DOMException: Permission denied to access property "origin" on cross-origin object </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js example-good notranslate"><code>// Script from example.com const sameOriginContext = window.open("https://example.com"); // This time, the new browsing context has the same origin console.log(sameOriginContext.origin); // https://example.com </code></pre></div> <p>有关更多信息，请参阅<a href="/en-US/docs/Web/Security/Same-origin_policy">同源策略</a>文章。</p> </section><section class="content-section" aria-labelledby="accessibility_concerns"> <h2 id="accessibility_concerns" class="heading"><a class="heading-anchor" href="#accessibility_concerns">可访问性考虑</a></h2>  </section><section class="content-section" aria-labelledby="avoid_resorting_to_window.open"> <h3 id="avoid_resorting_to_window.open" class="heading"><a class="heading-anchor" href="#avoid_resorting_to_window.open">避免使用 window.open()</a></h3> <p>出于以下几个原因，最好避免使用 <code>window.open()</code>：</p> <ul> <li>现代浏览器提供弹出窗口阻止功能。</li> <li>现代浏览器提供标签页浏览功能，且支持标签页的浏览器用户在大多数情况下更喜欢打开新标签页而非新窗口。</li> <li>用户可能会使用浏览器内置功能或扩展来选择是将链接在新窗口中打开、在同一窗口中打开、在新标签页中打开、在同一标签页中打开，还是在后台打开。强制使用 <code>window.open()</code> 以特定方式打开会让他们感到困惑并无视他们的习惯。</li> <li>弹出窗口没有菜单工具栏，而新标签页使用浏览器窗口的用户界面；因此，许多用户更喜欢标签页浏览，因为界面保持稳定。</li> </ul> </section><section class="content-section" aria-labelledby="never_use_window.open_inline_in_html"> <h3 id="never_use_window.open_inline_in_html" class="heading"><a class="heading-anchor" href="#never_use_window.open_inline_in_html">切勿在 HTML 中内联使用 window.open()</a></h3> <p>避免使用 <code><a href="#" onclick="window.open(…);"></code> 或 <code><a href="javascript:window\.open(…)" …></code>。</p> <p>这些伪造的 <code>href</code> 值在复制/拖动链接、在新标签页/窗口中打开链接、添加书签或在 JavaScript 加载、出错或被禁用时会导致意外行为。它们还会向辅助技术（如屏幕阅读器）传达不正确的语义。</p> <p>如有必要，请改用 <code><button></code> 元素。通常，<em>您应该只将链接用于导航到真实的 URL</em>。</p> </section><section class="content-section" aria-labelledby="always_identify_links_leading_to_a_secondary_window"> <h3 id="always_identify_links_leading_to_a_secondary_window" class="heading"><a class="heading-anchor" href="#always_identify_links_leading_to_a_secondary_window">始终标识指向辅助窗口的链接</a></h3> <p>以帮助用户导航的方式标识将打开新窗口的链接。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><a target="WikipediaWindow" href="https://www.wikipedia.org"> Wikipedia (opens in new tab) </a> </code></pre></div> <p>目的是警告用户上下文变化，以最大程度地减少用户的困惑：更改当前窗口或弹出新窗口可能会让用户感到非常迷失方向（对于弹出窗口，没有工具栏提供“上一步”按钮返回上一个窗口）。</p> <p>当上下文的极端变化在发生前明确标识时，用户可以决定是否继续，或者他们可以为变化做好准备：他们不仅不会感到困惑或迷失方向，而且经验丰富的用户可以更好地决定如何打开此类链接（是否在新窗口中打开，是否在同一窗口中打开，是否在新标签页中打开，是否在“后台”打开）。</p> <ul> <li><a href="https://webaim.org/techniques/hypertext/hypertext_links" class="external" target="_blank">WebAIM：链接和超文本 - 超文本链接</a></li> <li><a href="/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Understandable#guideline_3.2_—_predictable_make_web_pages_appear_and_operate_in_predictable_ways">MDN / 理解 WCAG，准则 3.2</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html" class="external" target="_blank">G200：仅在必要时从链接打开新窗口和标签页</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html" class="external" target="_blank">G201：在新窗口打开时提前向用户发出警告</a></li> </ul> </section><section class="content-section" aria-labelledby="specifications"> <h2 id="specifications" class="heading"><a class="heading-anchor" href="#specifications">规范</a></h2> <table> <thead> <tr> <th scope="col">规范</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="https://html.whatwg.cn/multipage/nav-history-apis.html#dom-open-dev" rel="noopener" target="_blank">HTML<br /># dom-open-dev</a></td> </tr><tr> <td><a class="external" href="https://drafts.csswg.org/cssom-view/#the-features-argument-to-the-open()-method" rel="noopener" target="_blank">CSSOM 视图模块<br /># the-features-argument-to-the-open()-method</a></td> </tr> </tbody> </table> </section><section class="content-section" aria-labelledby="browser_compatibility"> <h2 id="browser_compatibility" class="heading"><a class="heading-anchor" href="#browser_compatibility">浏览器兼容性</a></h2> <mdn-compat-table-lazy locale="en-US" query="api.Window.open"><template shadowroot="open" shadowrootmode="open"><style>*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}</style><p>加载中…</p></template></mdn-compat-table-lazy> </section><section class="content-section" aria-labelledby="see_also"> <h2 id="see_also" class="heading"><a class="heading-anchor" href="#see_also">另见</a></h2> <ul> <li><code>target</code> 属性文档<ul> <li><a href="/en-US/docs/Web/HTML/Reference/Elements/a#target"><code><a></code></a></li> <li><a href="/en-US/docs/Web/HTML/Reference/Elements/form#target"><code><form></code></a></li> </ul> </li> <li><a href="/en-US/docs/Web/API/Window/close"><code>window.close()</code></a></li> <li><a href="/en-US/docs/Web/API/Window/closed"><code>window.closed</code></a></li> <li><a href="/en-US/docs/Web/API/Window/focus"><code>window.focus()</code></a></li> <li><a href="/en-US/docs/Web/API/Window/opener"><code>window.opener</code></a></li> <li><a href="/en-US/docs/Web/HTML/Reference/Attributes/rel#opener"><code>rel="opener"</code></a> 和 <a href="/en-US/docs/Web/HTML/Reference/Attributes/rel#noopener"><code>rel="noopener"</code></a></li> <li><a href="/en-US/docs/Web/Security/Same-origin_policy">同源策略</a></li> </ul> </section> <section class="content-section article-footer" aria-labelledby="feedback"> <div class="article-footer__inner"> <div class="article-footer__svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" fill="none" viewBox="0 0 162 162"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="currentColor" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset=".246" stop-color="#2C81FA"></stop><stop offset=".516" stop-color="#5497F8"></stop><stop offset=".821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div> <h2 id="feedback">帮助改进 MDN</h2> <mdn-content-feedback locale="en-US"><template shadowroot="open" shadowrootmode="open"><style>.content-feedback{border:none;margin:0 0 .25rem;padding:0}.content-feedback>label{display:block;margin-bottom:.25rem}.content-feedback .thank-you{display:block;margin-bottom:calc(2.75rem + 2px)}.content-feedback mdn-button{flex:1;min-width:0}.content-feedback--buttons{display:inline-flex;gap:.75rem;margin:.25rem 0}.content-feedback--radios{align-items:center;display:flex;gap:.25rem;margin:.25rem 0}</style><fieldset class="content-feedback"> <label>此页面对您有帮助吗？ </label> <div class="content-feedback--buttons"> <mdn-button data-vote="yes" variant="secondary" action="positive" defer-hydration=""><template shadowroot="open" shadowrootmode="open"><style>.button{align-items:center;background-color:initial;border:1px solid #0000;border-radius:.25rem;color:var(--color-text-primary);column-gap:.3125em;cursor:pointer;display:inline-flex;font-family:var(--font-family-text);font-size:.875em;font-weight:450;justify-content:center;line-height:var(--font-line-ui);margin:0;padding:.5em;-webkit-text-decoration:none;text-decoration:none;vertical-align:middle}.button[data-variant=primary]{--csstools-light-dark-toggle-33eaa513-0:var(--csstools-color-scheme--light) var(--color-black);color:var(--csstools-light-dark-toggle-33eaa513-0,var(--color-white));--csstools-light-dark-toggle-33eaa513-1:var(--csstools-color-scheme--light) var(--color-white);background-color:var(--csstools-light-dark-toggle-33eaa513-1,var(--color-black))}@supports (color:light-dark(red,red)){.button[data-variant=primary]{background-color:light-dark(var(--color-black),var(--color-white));color:light-dark(var(--color-white),var(--color-black))}}.button[data-variant=primary]:hover{--csstools-light-dark-toggle-33eaa513-2:var(--csstools-color-scheme--light) var(--color-gray-80);background-color:var(--csstools-light-dark-toggle-33eaa513-2,var(--color-gray-20))}@supports (color:light-dark(red,red)){.button[data-variant=primary]:hover{background-color:light-dark(var(--color-gray-20),var(--color-gray-80))}}.button[data-variant=primary][data-action=positive]{color:var(--color-white);--csstools-light-dark-toggle-33eaa513-3:var(--csstools-color-scheme--light) var(--color-green-20);background-color:var(--csstools-light-dark-toggle-33eaa513-3,var(--color-green-50))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=positive]{background-color:light-dark(var(--color-green-50),var(--color-green-20))}}.button[data-variant=primary][data-action=positive]:hover{--csstools-light-dark-toggle-33eaa513-4:var(--csstools-color-scheme--light) var(--color-green-50);background-color:var(--csstools-light-dark-toggle-33eaa513-4,var(--color-green-20))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=positive]:hover{background-color:light-dark(var(--color-green-20),var(--color-green-50))}}.button[data-variant=primary][data-action=negative]{color:var(--color-white);--csstools-light-dark-toggle-33eaa513-5:var(--csstools-color-scheme--light) var(--color-red-20);background-color:var(--csstools-light-dark-toggle-33eaa513-5,var(--color-red-50))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=negative]{background-color:light-dark(var(--color-red-50),var(--color-red-20))}}.button[data-variant=primary][data-action=negative]:hover{--csstools-light-dark-toggle-33eaa513-6:var(--csstools-color-scheme--light) var(--color-red-50);background-color:var(--csstools-light-dark-toggle-33eaa513-6,var(--color-red-20))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=negative]:hover{background-color:light-dark(var(--color-red-20),var(--color-red-50))}}.button[data-variant=secondary]{border-color:currentcolor}.button[data-variant=secondary]:hover{--csstools-light-dark-toggle-33eaa513-7:var(--csstools-color-scheme--light) var(--color-gray-20);background-color:var(--csstools-light-dark-toggle-33eaa513-7,var(--color-gray-80))}@supports (color:light-dark(red,red)){.button[data-variant=secondary]:hover{background-color:light-dark(var(--color-gray-80),var(--color-gray-20))}}.button[data-variant=secondary][data-action=positive]{--csstools-light-dark-toggle-33eaa513-8:var(--csstools-color-scheme--light) var(--color-green-80);color:var(--csstools-light-dark-toggle-33eaa513-8,var(--color-green-50))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=positive]{color:light-dark(var(--color-green-50),var(--color-green-80))}}.button[data-variant=secondary][data-action=positive]:hover{--csstools-light-dark-toggle-33eaa513-9:var(--csstools-color-scheme--light) var(--color-green-10);background-color:var(--csstools-light-dark-toggle-33eaa513-9,var(--color-green-90))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=positive]:hover{background-color:light-dark(var(--color-green-90),var(--color-green-10))}}.button[data-variant=secondary][data-action=negative]{--csstools-light-dark-toggle-33eaa513-10:var(--csstools-color-scheme--light) var(--color-red-80);color:var(--csstools-light-dark-toggle-33eaa513-10,var(--color-red-50))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=negative]{color:light-dark(var(--color-red-50),var(--color-red-80))}}.button[data-variant=secondary][data-action=negative]:hover{--csstools-light-dark-toggle-33eaa513-11:var(--csstools-color-scheme--light) var(--color-red-10);background-color:var(--csstools-light-dark-toggle-33eaa513-11,var(--color-red-90))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=negative]:hover{background-color:light-dark(var(--color-red-90),var(--color-red-10))}}.button[data-variant=plain]:hover{--csstools-light-dark-toggle-33eaa513-12:var(--csstools-color-scheme--light) var(--color-gray-20);background-color:var(--csstools-light-dark-toggle-33eaa513-12,var(--color-gray-80))}@supports (color:light-dark(red,red)){.button[data-variant=plain]:hover{background-color:light-dark(var(--color-gray-80),var(--color-gray-20))}}.button[data-variant=plain][data-action=positive]{--csstools-light-dark-toggle-33eaa513-13:var(--csstools-color-scheme--light) var(--color-green-80);color:var(--csstools-light-dark-toggle-33eaa513-13,var(--color-green-50))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=positive]{color:light-dark(var(--color-green-50),var(--color-green-80))}}.button[data-variant=plain][data-action=positive]:hover{--csstools-light-dark-toggle-33eaa513-14:var(--csstools-color-scheme--light) var(--color-green-10);background-color:var(--csstools-light-dark-toggle-33eaa513-14,var(--color-green-90))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=positive]:hover{background-color:light-dark(var(--color-green-90),var(--color-green-10))}}.button[data-variant=plain][data-action=negative]{--csstools-light-dark-toggle-33eaa513-15:var(--csstools-color-scheme--light) var(--color-red-80);color:var(--csstools-light-dark-toggle-33eaa513-15,var(--color-red-50))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=negative]{color:light-dark(var(--color-red-50),var(--color-red-80))}}.button[data-variant=plain][data-action=negative]:hover{--csstools-light-dark-toggle-33eaa513-16:var(--csstools-color-scheme--light) var(--color-red-10);background-color:var(--csstools-light-dark-toggle-33eaa513-16,var(--color-red-90))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=negative]:hover{background-color:light-dark(var(--color-red-90),var(--color-red-10))}}.button[disabled]{--csstools-light-dark-toggle-33eaa513-17:var(--csstools-color-scheme--light) var(--color-gray-60)!important;color:var(--csstools-light-dark-toggle-33eaa513-17,var(--color-gray-40))!important;cursor:default;--csstools-light-dark-toggle-33eaa513-18:var(--csstools-color-scheme--light) var(--color-gray-20)!important;background-color:var(--csstools-light-dark-toggle-33eaa513-18,var(--color-gray-80))!important;border-color:#0000}@supports (color:light-dark(red,red)){.button[disabled]{background-color:light-dark(var(--color-gray-80),var(--color-gray-20))!important;color:light-dark(var(--color-gray-40),var(--color-gray-60))!important}}.button .icon{display:flex}.button svg{height:1.25em;width:1.25em}.button .label{padding-block:.125em;padding-inline:.0625em}:host{display:inline-flex;vertical-align:middle}.button{box-sizing:border-box;height:100%;width:100%}</style> <button class="button" aria-labelledby="label-4l5x56zr39c" data-variant="secondary" data-action="positive" part="button"> <span class="icon" part="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M7 10v12m8-16.12L14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88"></path></svg></span> <span id="label-4l5x56zr39c" class="label" part="label"><slot></slot></span>  </button> </template> 是 </mdn-button> <mdn-button data-vote="no" variant="secondary" action="negative" defer-hydration=""><template shadowroot="open" shadowrootmode="open"><style>.button{align-items:center;background-color:initial;border:1px solid #0000;border-radius:.25rem;color:var(--color-text-primary);column-gap:.3125em;cursor:pointer;display:inline-flex;font-family:var(--font-family-text);font-size:.875em;font-weight:450;justify-content:center;line-height:var(--font-line-ui);margin:0;padding:.5em;-webkit-text-decoration:none;text-decoration:none;vertical-align:middle}.button[data-variant=primary]{--csstools-light-dark-toggle-33eaa513-0:var(--csstools-color-scheme--light) var(--color-black);color:var(--csstools-light-dark-toggle-33eaa513-0,var(--color-white));--csstools-light-dark-toggle-33eaa513-1:var(--csstools-color-scheme--light) var(--color-white);background-color:var(--csstools-light-dark-toggle-33eaa513-1,var(--color-black))}@supports (color:light-dark(red,red)){.button[data-variant=primary]{background-color:light-dark(var(--color-black),var(--color-white));color:light-dark(var(--color-white),var(--color-black))}}.button[data-variant=primary]:hover{--csstools-light-dark-toggle-33eaa513-2:var(--csstools-color-scheme--light) var(--color-gray-80);background-color:var(--csstools-light-dark-toggle-33eaa513-2,var(--color-gray-20))}@supports (color:light-dark(red,red)){.button[data-variant=primary]:hover{background-color:light-dark(var(--color-gray-20),var(--color-gray-80))}}.button[data-variant=primary][data-action=positive]{color:var(--color-white);--csstools-light-dark-toggle-33eaa513-3:var(--csstools-color-scheme--light) var(--color-green-20);background-color:var(--csstools-light-dark-toggle-33eaa513-3,var(--color-green-50))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=positive]{background-color:light-dark(var(--color-green-50),var(--color-green-20))}}.button[data-variant=primary][data-action=positive]:hover{--csstools-light-dark-toggle-33eaa513-4:var(--csstools-color-scheme--light) var(--color-green-50);background-color:var(--csstools-light-dark-toggle-33eaa513-4,var(--color-green-20))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=positive]:hover{background-color:light-dark(var(--color-green-20),var(--color-green-50))}}.button[data-variant=primary][data-action=negative]{color:var(--color-white);--csstools-light-dark-toggle-33eaa513-5:var(--csstools-color-scheme--light) var(--color-red-20);background-color:var(--csstools-light-dark-toggle-33eaa513-5,var(--color-red-50))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=negative]{background-color:light-dark(var(--color-red-50),var(--color-red-20))}}.button[data-variant=primary][data-action=negative]:hover{--csstools-light-dark-toggle-33eaa513-6:var(--csstools-color-scheme--light) var(--color-red-50);background-color:var(--csstools-light-dark-toggle-33eaa513-6,var(--color-red-20))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=negative]:hover{background-color:light-dark(var(--color-red-20),var(--color-red-50))}}.button[data-variant=secondary]{border-color:currentcolor}.button[data-variant=secondary]:hover{--csstools-light-dark-toggle-33eaa513-7:var(--csstools-color-scheme--light) var(--color-gray-20);background-color:var(--csstools-light-dark-toggle-33eaa513-7,var(--color-gray-80))}@supports (color:light-dark(red,red)){.button[data-variant=secondary]:hover{background-color:light-dark(var(--color-gray-80),var(--color-gray-20))}}.button[data-variant=secondary][data-action=positive]{--csstools-light-dark-toggle-33eaa513-8:var(--csstools-color-scheme--light) var(--color-green-80);color:var(--csstools-light-dark-toggle-33eaa513-8,var(--color-green-50))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=positive]{color:light-dark(var(--color-green-50),var(--color-green-80))}}.button[data-variant=secondary][data-action=positive]:hover{--csstools-light-dark-toggle-33eaa513-9:var(--csstools-color-scheme--light) var(--color-green-10);background-color:var(--csstools-light-dark-toggle-33eaa513-9,var(--color-green-90))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=positive]:hover{background-color:light-dark(var(--color-green-90),var(--color-green-10))}}.button[data-variant=secondary][data-action=negative]{--csstools-light-dark-toggle-33eaa513-10:var(--csstools-color-scheme--light) var(--color-red-80);color:var(--csstools-light-dark-toggle-33eaa513-10,var(--color-red-50))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=negative]{color:light-dark(var(--color-red-50),var(--color-red-80))}}.button[data-variant=secondary][data-action=negative]:hover{--csstools-light-dark-toggle-33eaa513-11:var(--csstools-color-scheme--light) var(--color-red-10);background-color:var(--csstools-light-dark-toggle-33eaa513-11,var(--color-red-90))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=negative]:hover{background-color:light-dark(var(--color-red-90),var(--color-red-10))}}.button[data-variant=plain]:hover{--csstools-light-dark-toggle-33eaa513-12:var(--csstools-color-scheme--light) var(--color-gray-20);background-color:var(--csstools-light-dark-toggle-33eaa513-12,var(--color-gray-80))}@supports (color:light-dark(red,red)){.button[data-variant=plain]:hover{background-color:light-dark(var(--color-gray-80),var(--color-gray-20))}}.button[data-variant=plain][data-action=positive]{--csstools-light-dark-toggle-33eaa513-13:var(--csstools-color-scheme--light) var(--color-green-80);color:var(--csstools-light-dark-toggle-33eaa513-13,var(--color-green-50))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=positive]{color:light-dark(var(--color-green-50),var(--color-green-80))}}.button[data-variant=plain][data-action=positive]:hover{--csstools-light-dark-toggle-33eaa513-14:var(--csstools-color-scheme--light) var(--color-green-10);background-color:var(--csstools-light-dark-toggle-33eaa513-14,var(--color-green-90))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=positive]:hover{background-color:light-dark(var(--color-green-90),var(--color-green-10))}}.button[data-variant=plain][data-action=negative]{--csstools-light-dark-toggle-33eaa513-15:var(--csstools-color-scheme--light) var(--color-red-80);color:var(--csstools-light-dark-toggle-33eaa513-15,var(--color-red-50))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=negative]{color:light-dark(var(--color-red-50),var(--color-red-80))}}.button[data-variant=plain][data-action=negative]:hover{--csstools-light-dark-toggle-33eaa513-16:var(--csstools-color-scheme--light) var(--color-red-10);background-color:var(--csstools-light-dark-toggle-33eaa513-16,var(--color-red-90))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=negative]:hover{background-color:light-dark(var(--color-red-90),var(--color-red-10))}}.button[disabled]{--csstools-light-dark-toggle-33eaa513-17:var(--csstools-color-scheme--light) var(--color-gray-60)!important;color:var(--csstools-light-dark-toggle-33eaa513-17,var(--color-gray-40))!important;cursor:default;--csstools-light-dark-toggle-33eaa513-18:var(--csstools-color-scheme--light) var(--color-gray-20)!important;background-color:var(--csstools-light-dark-toggle-33eaa513-18,var(--color-gray-80))!important;border-color:#0000}@supports (color:light-dark(red,red)){.button[disabled]{background-color:light-dark(var(--color-gray-80),var(--color-gray-20))!important;color:light-dark(var(--color-gray-40),var(--color-gray-60))!important}}.button .icon{display:flex}.button svg{height:1.25em;width:1.25em}.button .label{padding-block:.125em;padding-inline:.0625em}:host{display:inline-flex;vertical-align:middle}.button{box-sizing:border-box;height:100%;width:100%}</style> <button class="button" aria-labelledby="label-zuhshizohni" data-variant="secondary" data-action="negative" part="button"> <span class="icon" part="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M17 14V2M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88"></path></svg></span> <span id="label-zuhshizohni" class="label" part="label"><slot></slot></span>  </button> </template> 否 </mdn-button> </div> </fieldset></template></mdn-content-feedback> <a class="article-footer__contribute" href="/en-US/docs/MDN/Community/Getting_started">了解如何贡献</a> <p class="article-footer__last-modified">本页面最后由<a href="/en-US/docs/Web/API/Window/open">MDN 贡献者</a>于<time datetime="2025-09-18T15:45:07.000Z">2025 年 9 月 18 日</time>修改。</p> <div class="article-footer__links"> <a class="external" href="https://github.com/mdn/content/blob/main/files/en-us/web/api/window/open/index.md?plain=1" title="文件夹：⁨en-us/web/api/window/open⁩（在新标签页中打开）" target="_blank" rel="noopener">在 GitHub 上查看此页面</a> • <a class="external" href="https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FWindow%2Fopen&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Fweb%2Fapi%2Fwindow%2Fopen%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FWindow%2Fopen%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fweb%2Fapi%2Fwindow%2Fopen%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F2ccbd062264d0a2a34f185a3386cb272f42c50f5%0A*+Document+last+modified%3A+2025-09-18T15%3A45%3A07.000Z%0A%0A%3C%2Fdetails%3E" title="这将带您到 GitHub 提交新问题。" target="_blank" rel="noopener">报告此内容的问题</a></div> </div> </section> </div> </main> <aside class="reference-layout__sidebar" id="main-sidebar"> <nav class="left-sidebar"> <div class="left-sidebar__header"> <mdn-sidebar-filter><template shadowroot="open" shadowrootmode="open"><style>.visually-hidden{border:0!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}:host{align-items:center;display:grid;grid-template-areas:"icon input button";grid-template-columns:2.2rem 1fr min-content}.icon{background-color:var(--color-text-secondary);content:"";grid-area:icon;height:1.25rem;justify-self:center;margin-left:.4rem;-webkit-mask-image:url(/static/ssr/filter.b77a4ccbfb57e2ef.svg);mask-image:url(/static/ssr/filter.b77a4ccbfb57e2ef.svg);-webkit-mask-size:cover;mask-size:cover;width:1.25rem}.input{background-color:initial;border:1px solid var(--color-border-primary);border-radius:var(--radius-full);grid-area:1/1/-1/-1;margin:0;padding:.3rem 4.2rem .3rem 2.2rem;width:100%}.input::placeholder{color:var(--color-text-secondary)}.input:focus{border-color:#0000}.counter{background-color:var(--color-background-yellow);border-radius:var(--radius-normal);font-size:var(--font-size-small);grid-area:input;justify-self:end;line-height:var(--font-line-ui);padding:.25rem;white-space:nowrap}.button{grid-area:button}.button::part(button){border-radius:50%}.button::part(button):hover{background-color:initial}:placeholder-shown~.button{visibility:hidden}</style> <label class="icon" for="input"> <span class="visually-hidden">筛选侧边栏</span> </label> <input id="input" autocomplete="off" class="input" type="text" placeholder="Filter" value="" />  <mdn-button class="button" variant="plain" icon-only="" label="Clear filter input" defer-hydration=""><template shadowroot="open" shadowrootmode="open"><style>.button{align-items:center;background-color:initial;border:1px solid #0000;border-radius:.25rem;color:var(--color-text-primary);column-gap:.3125em;cursor:pointer;display:inline-flex;font-family:var(--font-family-text);font-size:.875em;font-weight:450;justify-content:center;line-height:var(--font-line-ui);margin:0;padding:.5em;-webkit-text-decoration:none;text-decoration:none;vertical-align:middle}.button[data-variant=primary]{--csstools-light-dark-toggle-33eaa513-0:var(--csstools-color-scheme--light) var(--color-black);color:var(--csstools-light-dark-toggle-33eaa513-0,var(--color-white));--csstools-light-dark-toggle-33eaa513-1:var(--csstools-color-scheme--light) var(--color-white);background-color:var(--csstools-light-dark-toggle-33eaa513-1,var(--color-black))}@supports (color:light-dark(red,red)){.button[data-variant=primary]{background-color:light-dark(var(--color-black),var(--color-white));color:light-dark(var(--color-white),var(--color-black))}}.button[data-variant=primary]:hover{--csstools-light-dark-toggle-33eaa513-2:var(--csstools-color-scheme--light) var(--color-gray-80);background-color:var(--csstools-light-dark-toggle-33eaa513-2,var(--color-gray-20))}@supports (color:light-dark(red,red)){.button[data-variant=primary]:hover{background-color:light-dark(var(--color-gray-20),var(--color-gray-80))}}.button[data-variant=primary][data-action=positive]{color:var(--color-white);--csstools-light-dark-toggle-33eaa513-3:var(--csstools-color-scheme--light) var(--color-green-20);background-color:var(--csstools-light-dark-toggle-33eaa513-3,var(--color-green-50))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=positive]{background-color:light-dark(var(--color-green-50),var(--color-green-20))}}.button[data-variant=primary][data-action=positive]:hover{--csstools-light-dark-toggle-33eaa513-4:var(--csstools-color-scheme--light) var(--color-green-50);background-color:var(--csstools-light-dark-toggle-33eaa513-4,var(--color-green-20))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=positive]:hover{background-color:light-dark(var(--color-green-20),var(--color-green-50))}}.button[data-variant=primary][data-action=negative]{color:var(--color-white);--csstools-light-dark-toggle-33eaa513-5:var(--csstools-color-scheme--light) var(--color-red-20);background-color:var(--csstools-light-dark-toggle-33eaa513-5,var(--color-red-50))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=negative]{background-color:light-dark(var(--color-red-50),var(--color-red-20))}}.button[data-variant=primary][data-action=negative]:hover{--csstools-light-dark-toggle-33eaa513-6:var(--csstools-color-scheme--light) var(--color-red-50);background-color:var(--csstools-light-dark-toggle-33eaa513-6,var(--color-red-20))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=negative]:hover{background-color:light-dark(var(--color-red-20),var(--color-red-50))}}.button[data-variant=secondary]{border-color:currentcolor}.button[data-variant=secondary]:hover{--csstools-light-dark-toggle-33eaa513-7:var(--csstools-color-scheme--light) var(--color-gray-20);background-color:var(--csstools-light-dark-toggle-33eaa513-7,var(--color-gray-80))}@supports (color:light-dark(red,red)){.button[data-variant=secondary]:hover{background-color:light-dark(var(--color-gray-80),var(--color-gray-20))}}.button[data-variant=secondary][data-action=positive]{--csstools-light-dark-toggle-33eaa513-8:var(--csstools-color-scheme--light) var(--color-green-80);color:var(--csstools-light-dark-toggle-33eaa513-8,var(--color-green-50))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=positive]{color:light-dark(var(--color-green-50),var(--color-green-80))}}.button[data-variant=secondary][data-action=positive]:hover{--csstools-light-dark-toggle-33eaa513-9:var(--csstools-color-scheme--light) var(--color-green-10);background-color:var(--csstools-light-dark-toggle-33eaa513-9,var(--color-green-90))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=positive]:hover{background-color:light-dark(var(--color-green-90),var(--color-green-10))}}.button[data-variant=secondary][data-action=negative]{--csstools-light-dark-toggle-33eaa513-10:var(--csstools-color-scheme--light) var(--color-red-80);color:var(--csstools-light-dark-toggle-33eaa513-10,var(--color-red-50))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=negative]{color:light-dark(var(--color-red-50),var(--color-red-80))}}.button[data-variant=secondary][data-action=negative]:hover{--csstools-light-dark-toggle-33eaa513-11:var(--csstools-color-scheme--light) var(--color-red-10);background-color:var(--csstools-light-dark-toggle-33eaa513-11,var(--color-red-90))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=negative]:hover{background-color:light-dark(var(--color-red-90),var(--color-red-10))}}.button[data-variant=plain]:hover{--csstools-light-dark-toggle-33eaa513-12:var(--csstools-color-scheme--light) var(--color-gray-20);background-color:var(--csstools-light-dark-toggle-33eaa513-12,var(--color-gray-80))}@supports (color:light-dark(red,red)){.button[data-variant=plain]:hover{background-color:light-dark(var(--color-gray-80),var(--color-gray-20))}}.button[data-variant=plain][data-action=positive]{--csstools-light-dark-toggle-33eaa513-13:var(--csstools-color-scheme--light) var(--color-green-80);color:var(--csstools-light-dark-toggle-33eaa513-13,var(--color-green-50))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=positive]{color:light-dark(var(--color-green-50),var(--color-green-80))}}.button[data-variant=plain][data-action=positive]:hover{--csstools-light-dark-toggle-33eaa513-14:var(--csstools-color-scheme--light) var(--color-green-10);background-color:var(--csstools-light-dark-toggle-33eaa513-14,var(--color-green-90))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=positive]:hover{background-color:light-dark(var(--color-green-90),var(--color-green-10))}}.button[data-variant=plain][data-action=negative]{--csstools-light-dark-toggle-33eaa513-15:var(--csstools-color-scheme--light) var(--color-red-80);color:var(--csstools-light-dark-toggle-33eaa513-15,var(--color-red-50))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=negative]{color:light-dark(var(--color-red-50),var(--color-red-80))}}.button[data-variant=plain][data-action=negative]:hover{--csstools-light-dark-toggle-33eaa513-16:var(--csstools-color-scheme--light) var(--color-red-10);background-color:var(--csstools-light-dark-toggle-33eaa513-16,var(--color-red-90))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=negative]:hover{background-color:light-dark(var(--color-red-90),var(--color-red-10))}}.button[disabled]{--csstools-light-dark-toggle-33eaa513-17:var(--csstools-color-scheme--light) var(--color-gray-60)!important;color:var(--csstools-light-dark-toggle-33eaa513-17,var(--color-gray-40))!important;cursor:default;--csstools-light-dark-toggle-33eaa513-18:var(--csstools-color-scheme--light) var(--color-gray-20)!important;background-color:var(--csstools-light-dark-toggle-33eaa513-18,var(--color-gray-80))!important;border-color:#0000}@supports (color:light-dark(red,red)){.button[disabled]{background-color:light-dark(var(--color-gray-80),var(--color-gray-20))!important;color:light-dark(var(--color-gray-40),var(--color-gray-60))!important}}.button .icon{display:flex}.button svg{height:1.25em;width:1.25em}.button .label{padding-block:.125em;padding-inline:.0625em}:host{display:inline-flex;vertical-align:middle}.button{box-sizing:border-box;height:100%;width:100%}</style> <button class="button" aria-labelledby="label-z89gf8is0zc" data-variant="plain" part="button"> <span class="icon" part="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"></path></svg></span> <span id="label-z89gf8is0zc" class="label" hidden="" part="label"><slot></slot></span>  </button> </template></mdn-button> </template></mdn-sidebar-filter> </div> <div class="left-sidebar__content"><ol><li class="section"><a href="/en-US/docs/Web/API/Window"><code>Window</code></a></li><li><details open=""><summary><span>实例属性</span></summary><ol><li><a href="/en-US/docs/Web/API/Window/caches"><code>caches</code></a></li><li><a href="/en-US/docs/Web/API/Window/closed"><code>closed</code></a></li><li><a href="/en-US/docs/Web/API/Window/cookieStore"><code>cookieStore</code></a></li><li><a href="/en-US/docs/Web/API/Window/credentialless"><code>credentialless</code></a><abbr class="icon icon-experimental" title="实验性。期望将来行为有所改变。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/crossOriginIsolated"><code>crossOriginIsolated</code></a></li><li><a href="/en-US/docs/Web/API/Window/crypto"><code>crypto</code></a></li><li><a href="/en-US/docs/Web/API/Window/customElements"><code>customElements</code></a></li><li><a href="/en-US/docs/Web/API/Window/devicePixelRatio"><code>devicePixelRatio</code></a></li><li><a href="/en-US/docs/Web/API/Window/document"><code>document</code></a></li><li><a href="/en-US/docs/Web/API/Window/documentPictureInPicture"><code>documentPictureInPicture</code></a><abbr class="icon icon-experimental" title="实验性。期望将来行为有所改变。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/event"><code>event</code></a><abbr class="icon icon-deprecated" title="已废弃。不应在新网站中使用。"> <span class="visually-hidden">已废弃</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/external"><code>external</code></a><abbr class="icon icon-deprecated" title="已废弃。不应在新网站中使用。"> <span class="visually-hidden">已废弃</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/fence"><code>fence</code></a><abbr class="icon icon-experimental" title="实验性。期望将来行为有所改变。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/frameElement"><code>frameElement</code></a></li><li><a href="/en-US/docs/Web/API/Window/frames"><code>frames</code></a></li><li><a href="/en-US/docs/Web/API/Window/fullScreen"><code>fullScreen</code></a><abbr class="icon icon-nonstandard" title="非标准。在使用前请检查跨浏览器支持情况。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/history"><code>history</code></a></li><li><a href="/en-US/docs/Web/API/Window/indexedDB"><code>indexedDB</code></a></li><li><a href="/en-US/docs/Web/API/Window/innerHeight"><code>innerHeight</code></a></li><li><a href="/en-US/docs/Web/API/Window/innerWidth"><code>innerWidth</code></a></li><li><a href="/en-US/docs/Web/API/Window/isSecureContext"><code>isSecureContext</code></a></li><li><a href="/en-US/docs/Web/API/Window/launchQueue"><code>launchQueue</code></a><abbr class="icon icon-experimental" title="实验性。期望将来行为有所改变。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/length"><code>length</code></a></li><li><a href="/en-US/docs/Web/API/Window/localStorage"><code>localStorage</code></a></li><li><a href="/en-US/docs/Web/API/Window/location"><code>location</code></a></li><li><a href="/en-US/docs/Web/API/Window/locationbar"><code>locationbar</code></a></li><li><a href="/en-US/docs/Web/API/Window/menubar"><code>menubar</code></a></li><li><a href="/en-US/docs/Web/API/Window/mozInnerScreenX"><code>mozInnerScreenX</code></a><abbr class="icon icon-nonstandard" title="非标准。在使用前请检查跨浏览器支持情况。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/mozInnerScreenY"><code>mozInnerScreenY</code></a><abbr class="icon icon-nonstandard" title="非标准。在使用前请检查跨浏览器支持情况。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/name"><code>name</code></a></li><li><a href="/en-US/docs/Web/API/Window/navigation"><code>navigation</code></a><abbr class="icon icon-experimental" title="实验性。期望将来行为有所改变。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/navigator"><code>navigator</code></a></li><li><a href="/en-US/docs/Web/API/Window/opener"><code>opener</code></a></li><li><a href="/en-US/docs/Web/API/Window/orientation"><code>orientation</code></a><abbr class="icon icon-deprecated" title="已废弃。不应在新网站中使用。"> <span class="visually-hidden">已废弃</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/origin"><code>origin</code></a></li><li><a href="/en-US/docs/Web/API/Window/originAgentCluster"><code>originAgentCluster</code></a></li><li><a href="/en-US/docs/Web/API/Window/outerHeight"><code>outerHeight</code></a></li><li><a href="/en-US/docs/Web/API/Window/outerWidth"><code>outerWidth</code></a></li><li><a href="/en-US/docs/Web/API/Window/parent"><code>parent</code></a></li><li><a href="/en-US/docs/Web/API/Window/performance"><code>performance</code></a></li><li><a href="/en-US/docs/Web/API/Window/personalbar"><code>personalbar</code></a></li><li><a href="/en-US/docs/Web/API/Window/scheduler"><code>scheduler</code></a></li><li><a href="/en-US/docs/Web/API/Window/screen"><code>screen</code></a></li><li><a href="/en-US/docs/Web/API/Window/screenLeft"><code>screenLeft</code></a></li><li><a href="/en-US/docs/Web/API/Window/screenTop"><code>screenTop</code></a></li><li><a href="/en-US/docs/Web/API/Window/screenX"><code>screenX</code></a></li><li><a href="/en-US/docs/Web/API/Window/screenY"><code>screenY</code></a></li><li><a href="/en-US/docs/Web/API/Window/scrollbars"><code>scrollbars</code></a></li><li><a href="/en-US/docs/Web/API/Window/scrollMaxX"><code>scrollMaxX</code></a><abbr class="icon icon-nonstandard" title="非标准。在使用前请检查跨浏览器支持情况。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/scrollMaxY"><code>scrollMaxY</code></a><abbr class="icon icon-nonstandard" title="非标准。在使用前请检查跨浏览器支持情况。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/scrollX"><code>scrollX</code></a></li><li><a href="/en-US/docs/Web/API/Window/scrollY"><code>scrollY</code></a></li><li><a href="/en-US/docs/Web/API/Window/self"><code>self</code></a></li><li><a href="/en-US/docs/Web/API/Window/sessionStorage"><code>sessionStorage</code></a></li><li><a href="/en-US/docs/Web/API/Window/sharedStorage"><code>sharedStorage</code></a><abbr class="icon icon-experimental" title="实验性。期望将来行为有所改变。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/speechSynthesis"><code>speechSynthesis</code></a></li><li><a href="/en-US/docs/Web/API/Window/status"><code>status</code></a><abbr class="icon icon-deprecated" title="已废弃。不应在新网站中使用。"> <span class="visually-hidden">已废弃</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/statusbar"><code>statusbar</code></a></li><li><a href="/en-US/docs/Web/API/Window/toolbar"><code>toolbar</code></a></li><li><a href="/en-US/docs/Web/API/Window/top"><code>top</code></a></li><li><a href="/en-US/docs/Web/API/Window/trustedTypes"><code>trustedTypes</code></a></li><li><a href="/en-US/docs/Web/API/Window/viewport"><code>viewport</code></a><abbr class="icon icon-experimental" title="实验性。期望将来行为有所改变。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/visualViewport"><code>visualViewport</code></a></li><li><a href="/en-US/docs/Web/API/Window/window"><code>window</code></a></li></ol></details></li><li><details open=""><summary><span>实例方法</span></summary><ol><li><a href="/en-US/docs/Web/API/Window/alert"><code>alert()</code></a></li><li><a href="/en-US/docs/Web/API/Window/atob"><code>atob()</code></a></li><li><a href="/en-US/docs/Web/API/Window/blur"><code>blur()</code></a><abbr class="icon icon-deprecated" title="已废弃。不应在新网站中使用。"> <span class="visually-hidden">已废弃</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/btoa"><code>btoa()</code></a></li><li><a href="/en-US/docs/Web/API/Window/cancelAnimationFrame"><code>cancelAnimationFrame()</code></a></li><li><a href="/en-US/docs/Web/API/Window/cancelIdleCallback"><code>cancelIdleCallback()</code></a></li><li><a href="/en-US/docs/Web/API/Window/captureEvents"><code>captureEvents()</code></a><abbr class="icon icon-deprecated" title="已废弃。不应在新网站中使用。"> <span class="visually-hidden">已废弃</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/clearImmediate"><code>clearImmediate()</code></a><abbr class="icon icon-nonstandard" title="非标准。在使用前请检查跨浏览器支持情况。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已废弃。不应在新网站中使用。"> <span class="visually-hidden">已废弃</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/clearInterval"><code>clearInterval()</code></a></li><li><a href="/en-US/docs/Web/API/Window/clearTimeout"><code>clearTimeout()</code></a></li><li><a href="/en-US/docs/Web/API/Window/close"><code>close()</code></a></li><li><a href="/en-US/docs/Web/API/Window/confirm"><code>confirm()</code></a></li><li><a href="/en-US/docs/Web/API/Window/createImageBitmap"><code>createImageBitmap()</code></a></li><li><a href="/en-US/docs/Web/API/Window/dump"><code>dump()</code></a><abbr class="icon icon-nonstandard" title="非标准。在使用前请检查跨浏览器支持情况。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/fetch"><code>fetch()</code></a></li><li><a href="/en-US/docs/Web/API/Window/fetchLater"><code>fetchLater()</code></a><abbr class="icon icon-experimental" title="实验性。期望将来行为有所改变。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/find"><code>find()</code></a><abbr class="icon icon-nonstandard" title="非标准。在使用前请检查跨浏览器支持情况。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/focus"><code>focus()</code></a></li><li><a href="/en-US/docs/Web/API/Window/getComputedStyle"><code>getComputedStyle()</code></a></li><li><a href="/en-US/docs/Web/API/Window/getDefaultComputedStyle"><code>getDefaultComputedStyle()</code></a><abbr class="icon icon-nonstandard" title="非标准。在使用前请检查跨浏览器支持情况。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/getScreenDetails"><code>getScreenDetails()</code></a><abbr class="icon icon-experimental" title="实验性。期望将来行为有所改变。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/getSelection"><code>getSelection()</code></a></li><li><a href="/en-US/docs/Web/API/Window/matchMedia"><code>matchMedia()</code></a></li><li><a href="/en-US/docs/Web/API/Window/moveBy"><code>moveBy()</code></a></li><li><a href="/en-US/docs/Web/API/Window/moveTo"><code>moveTo()</code></a></li><li><em><a href="/en-US/docs/Web/API/Window/open" aria-current="page"><code>open()</code></a></em></li><li><a href="/en-US/docs/Web/API/Window/postMessage"><code>postMessage()</code></a></li><li><a href="/en-US/docs/Web/API/Window/print"><code>print()</code></a></li><li><a href="/en-US/docs/Web/API/Window/prompt"><code>prompt()</code></a></li><li><a href="/en-US/docs/Web/API/Window/queryLocalFonts"><code>queryLocalFonts()</code></a><abbr class="icon icon-experimental" title="实验性。期望将来行为有所改变。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/queueMicrotask"><code>queueMicrotask()</code></a></li><li><a href="/en-US/docs/Web/API/Window/releaseEvents"><code>releaseEvents()</code></a><abbr class="icon icon-deprecated" title="已废弃。不应在新网站中使用。"> <span class="visually-hidden">已废弃</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/reportError"><code>reportError()</code></a></li><li><a href="/en-US/docs/Web/API/Window/requestAnimationFrame"><code>requestAnimationFrame()</code></a></li><li><a href="/en-US/docs/Web/API/Window/requestFileSystem"><code>requestFileSystem()</code></a><abbr class="icon icon-nonstandard" title="非标准。在使用前请检查跨浏览器支持情况。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已废弃。不应在新网站中使用。"> <span class="visually-hidden">已废弃</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/requestIdleCallback"><code>requestIdleCallback()</code></a></li><li><a href="/en-US/docs/Web/API/Window/resizeBy"><code>resizeBy()</code></a></li><li><a href="/en-US/docs/Web/API/Window/resizeTo"><code>resizeTo()</code></a></li><li><a href="/en-US/docs/Web/API/Window/scroll"><code>scroll()</code></a></li><li><a href="/en-US/docs/Web/API/Window/scrollBy"><code>scrollBy()</code></a></li><li><a href="/en-US/docs/Web/API/Window/scrollByLines"><code>scrollByLines()</code></a><abbr class="icon icon-nonstandard" title="非标准。在使用前请检查跨浏览器支持情况。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/scrollByPages"><code>scrollByPages()</code></a><abbr class="icon icon-nonstandard" title="非标准。在使用前请检查跨浏览器支持情况。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/scrollTo"><code>scrollTo()</code></a></li><li><a href="/en-US/docs/Web/API/Window/setImmediate"><code>setImmediate()</code></a><abbr class="icon icon-nonstandard" title="非标准。在使用前请检查跨浏览器支持情况。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已废弃。不应在新网站中使用。"> <span class="visually-hidden">已废弃</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/setInterval"><code>setInterval()</code></a></li><li><a href="/en-US/docs/Web/API/Window/setResizable"><code>setResizable()</code></a><abbr class="icon icon-nonstandard" title="非标准。在使用前请检查跨浏览器支持情况。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已废弃。不应在新网站中使用。"> <span class="visually-hidden">已废弃</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/setTimeout"><code>setTimeout()</code></a></li><li><a href="/en-US/docs/Web/API/Window/showDirectoryPicker"><code>showDirectoryPicker()</code></a><abbr class="icon icon-experimental" title="实验性。期望将来行为有所改变。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/showOpenFilePicker"><code>showOpenFilePicker()</code></a><abbr class="icon icon-experimental" title="实验性。期望将来行为有所改变。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/showSaveFilePicker"><code>showSaveFilePicker()</code></a><abbr class="icon icon-experimental" title="实验性。期望将来行为有所改变。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/sizeToContent"><code>sizeToContent()</code></a><abbr class="icon icon-nonstandard" title="非标准。在使用前请检查跨浏览器支持情况。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/stop"><code>stop()</code></a></li><li><a href="/en-US/docs/Web/API/Window/structuredClone"><code>structuredClone()</code></a></li><li><a href="/en-US/docs/Web/API/Window/webkitConvertPointFromNodeToPage"><code>webkitConvertPointFromNodeToPage()</code></a><abbr class="icon icon-nonstandard" title="非标准。在使用前请检查跨浏览器支持情况。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已废弃。不应在新网站中使用。"> <span class="visually-hidden">已废弃</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/webkitConvertPointFromPageToNode"><code>webkitConvertPointFromPageToNode()</code></a><abbr class="icon icon-nonstandard" title="非标准。在使用前请检查跨浏览器支持情况。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已废弃。不应在新网站中使用。"> <span class="visually-hidden">已废弃</span> </abbr></li></ol></details></li><li><details open=""><summary><span>事件</span></summary><ol><li><a href="/en-US/docs/Web/API/Window/afterprint_event"><code>afterprint</code></a></li><li><a href="/en-US/docs/Web/API/Window/appinstalled_event"><code>appinstalled</code></a></li><li><a href="/en-US/docs/Web/API/Window/beforeinstallprompt_event"><code>beforeinstallprompt</code></a></li><li><a href="/en-US/docs/Web/API/Window/beforeprint_event"><code>beforeprint</code></a></li><li><a href="/en-US/docs/Web/API/Window/beforeunload_event"><code>beforeunload</code></a></li><li><a href="/en-US/docs/Web/API/Window/blur_event"><code>blur</code></a></li><li><a href="/en-US/docs/Web/API/Window/devicemotion_event"><code>devicemotion</code></a></li><li><a href="/en-US/docs/Web/API/Window/deviceorientation_event"><code>deviceorientation</code></a></li><li><a href="/en-US/docs/Web/API/Window/deviceorientationabsolute_event"><code>deviceorientationabsolute</code></a></li><li><a href="/en-US/docs/Web/API/Window/error_event"><code>error</code></a></li><li><a href="/en-US/docs/Web/API/Window/focus_event"><code>focus</code></a></li><li><a href="/en-US/docs/Web/API/Window/gamepadconnected_event"><code>gamepadconnected</code></a></li><li><a href="/en-US/docs/Web/API/Window/gamepaddisconnected_event"><code>gamepaddisconnected</code></a></li><li><a href="/en-US/docs/Web/API/Window/hashchange_event"><code>hashchange</code></a></li><li><a href="/en-US/docs/Web/API/Window/languagechange_event"><code>languagechange</code></a></li><li><a href="/en-US/docs/Web/API/Window/load_event"><code>load</code></a></li><li><a href="/en-US/docs/Web/API/Window/message_event"><code>message</code></a></li><li><a href="/en-US/docs/Web/API/Window/messageerror_event"><code>messageerror</code></a></li><li><a href="/en-US/docs/Web/API/Window/offline_event"><code>offline</code></a></li><li><a href="/en-US/docs/Web/API/Window/online_event"><code>online</code></a></li><li><a href="/en-US/docs/Web/API/Window/orientationchange_event"><code>orientationchange</code></a><abbr class="icon icon-deprecated" title="已废弃。不应在新网站中使用。"> <span class="visually-hidden">已废弃</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/pagehide_event"><code>pagehide</code></a></li><li><a href="/en-US/docs/Web/API/Window/pagereveal_event"><code>pagereveal</code></a></li><li><a href="/en-US/docs/Web/API/Window/pageshow_event"><code>pageshow</code></a></li><li><a href="/en-US/docs/Web/API/Window/pageswap_event"><code>pageswap</code></a></li><li><a href="/en-US/docs/Web/API/Window/popstate_event"><code>popstate</code></a></li><li><a href="/en-US/docs/Web/API/Window/rejectionhandled_event"><code>rejectionhandled</code></a></li><li><a href="/en-US/docs/Web/API/Window/resize_event"><code>resize</code></a></li><li><a href="/en-US/docs/Web/API/Window/scrollsnapchange_event"><code>scrollsnapchange</code></a><abbr class="icon icon-experimental" title="实验性。期望将来行为有所改变。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/scrollsnapchanging_event"><code>scrollsnapchanging</code></a><abbr class="icon icon-experimental" title="实验性。期望将来行为有所改变。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/storage_event"><code>storage</code></a></li><li><a href="/en-US/docs/Web/API/Window/unhandledrejection_event"><code>unhandledrejection</code></a></li><li><a href="/en-US/docs/Web/API/Window/unload_event"><code>unload</code></a><abbr class="icon icon-deprecated" title="已废弃。不应在新网站中使用。"> <span class="visually-hidden">已废弃</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/vrdisplayactivate_event"><code>vrdisplayactivate</code></a><abbr class="icon icon-nonstandard" title="非标准。在使用前请检查跨浏览器支持情况。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已废弃。不应在新网站中使用。"> <span class="visually-hidden">已废弃</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/vrdisplayconnect_event"><code>vrdisplayconnect</code></a><abbr class="icon icon-nonstandard" title="非标准。在使用前请检查跨浏览器支持情况。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已废弃。不应在新网站中使用。"> <span class="visually-hidden">已废弃</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/vrdisplaydeactivate_event"><code>vrdisplaydeactivate</code></a><abbr class="icon icon-nonstandard" title="非标准。在使用前请检查跨浏览器支持情况。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已废弃。不应在新网站中使用。"> <span class="visually-hidden">已废弃</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/vrdisplaydisconnect_event"><code>vrdisplaydisconnect</code></a><abbr class="icon icon-nonstandard" title="非标准。在使用前请检查跨浏览器支持情况。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已废弃。不应在新网站中使用。"> <span class="visually-hidden">已废弃</span> </abbr></li><li><a href="/en-US/docs/Web/API/Window/vrdisplaypresentchange_event"><code>vrdisplaypresentchange</code></a><abbr class="icon icon-nonstandard" title="非标准。在使用前请检查跨浏览器支持情况。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已废弃。不应在新网站中使用。"> <span class="visually-hidden">已废弃</span> </abbr></li></ol></details></li><li><details open=""><summary><span>继承</span></summary><ol><li><a href="/en-US/docs/Web/API/EventTarget"><code>EventTarget</code></a></li></ol></details></li></ol></div> </nav> </aside> </div> </div> <div class="page-layout__footer"> <mdn-placement-bottom></mdn-placement-bottom> <footer class="footer"> <div class="footer__mdn"> <div class="footer__intro"> <a class="footer__logo" href="/" aria-label="MDN logo"><svg xmlns="http://www.w3.org/2000/svg" width="83" height="24" viewBox="0 0 83 24"><path d="M9.4 0 2.81 21.17H.12L6.69 0zm2.38 0v21.17H9.4V0h2.4Zm9.27 0-6.56 21.17H11.8L18.36 0zm2.39 0v21.17h-2.4V0zm22.11 16.83h-3.93v-1.27h.87v-3.63c0-.85-.16-1.45-.48-1.82a1.65 1.65 0 0 0-1.3-.52c-.74 0-1.3.25-1.66.78a3 3 0 0 0-.58 1.58v3.59h1.38v1.26h-3.93v-1.26h.87v-3.6c0-.88-.16-1.48-.48-1.83a1.7 1.7 0 0 0-1.29-.52 1.93 1.93 0 0 0-1.65.75 2.85 2.85 0 0 0-.58 1.6v3.62h1.59v1.27h-4.64v-1.27h1.37V9.75h-1.4V8.46h3.08v1.47c.28-.48.62-.87 1.08-1.2a3 3 0 0 1 1.68-.45c.67 0 1.22.16 1.73.48.5.32.85.8 1.03 1.47.25-.57.62-1.03 1.13-1.4.5-.37 1.1-.55 1.81-.55.8 0 1.5.25 2.05.75.55.51.85 1.3.85 2.35v4.18h1.4zm9.77 0H52.3v-1.66c-.27.51-.66.95-1.13 1.29-.56.4-1.23.59-1.9.55-1.11 0-2-.37-2.67-1.12a4.4 4.4 0 0 1-1-3.06c0-1.15.3-2.2.93-3.15.6-.94 1.58-1.43 2.94-1.43s2.25.5 2.83 1.5V5.22h-2V3.93h3.63v11.63h1.38v1.27Zm-3.06-3.86v-1.02a2.28 2.28 0 0 0-.73-1.67 2.4 2.4 0 0 0-1.66-.65 2.18 2.18 0 0 0-1.88.9 3.63 3.63 0 0 0-.65 2.2c0 .95.23 1.68.7 2.19.45.5 1.03.76 1.7.76.73 0 1.33-.3 1.79-.88.48-.6.71-1.21.73-1.83m14.14 3.86h-4.43v-1.27h1.37v-3.63c0-.85-.16-1.45-.5-1.82a1.68 1.68 0 0 0-1.31-.52c-.71 0-1.29.23-1.7.69a2.52 2.52 0 0 0-.67 1.6v3.66h1.38v1.26H56.1v-1.26h1.38v-5.8h-1.42V8.47h3.12V9.9c.6-1.06 1.57-1.6 2.92-1.6.83 0 1.54.26 2.12.77.57.5.85 1.28.85 2.34v4.19h1.38v1.24h-.05Zm1.31 5.15H83V24H67.71z"></path></svg></a> <p>你的更美好互联网蓝图。</p> </div> <ul class="footer__socials"> <li> <a href="https://github.com/mdn/" aria-label="MDN on GitHub" data-icon="github"></a> </li> <li> <a href="https://bsky.app/profile/developer.mozilla.org" aria-label="MDN on Bluesky" data-icon="bluesky"></a> </li> <li> <a href="https://x.com/mozdevnet" aria-label="MDN on X" data-icon="x"></a> </li> <li> <a href="https://mastodon.social/@mdn" aria-label="MDN on Mastodon" data-icon="mastodon"></a> </li> <li> <a href="/en-US/blog/rss.xml" aria-label="MDN blog RSS feed" data-icon="rss"></a> </li> </ul> <dl class="footer__links"> <dt>MDN</dt> <dd> <ul> <li> <a href="/en-US/about" class="">关于</a> </li> <li> <a href="/en-US/blog/" class="">博客</a> </li> <li> <a href="https://www.mozilla.org/en-US/careers/listings/" class="external">Mozilla 职业</a> </li> <li> <a href="/en-US/advertising" class="">与我们一起做广告</a> </li> <li> <a href="/en-US/plus" class="">MDN Plus</a> </li> <li> <a href="https://support.mozilla.org/products/mdn-plus" class="external">产品帮助</a> </li> </ul> </dd> </dl> <dl class="footer__links"> <dt>贡献</dt> <dd> <ul> <li> <a href="/en-US/community" class="">MDN 社区</a> </li> <li> <a href="/en-US/docs/MDN/Community" class="">社区资源</a> </li> <li> <a href="/en-US/docs/MDN/Writing_guidelines" class="">写作指南</a> </li> <li> <a href="/discord" class="external">MDN Discord</a> </li> <li> <a href="https://github.com/mdn" class="external">GitHub 上的 MDN</a> </li> </ul> </dd> </dl> <dl class="footer__links"> <dt>开发者</dt> <dd> <ul> <li> <a href="/en-US/docs/Web" class="">Web 技术</a> </li> <li> <a href="/en-US/docs/Learn_web_development" class="">学习 Web 开发</a> </li> <li> <a href="/en-US/docs/MDN/Guides" class="">指南</a> </li> <li> <a href="/en-US/docs/MDN/Tutorials" class="">教程</a> </li> <li> <a href="/en-US/docs/Glossary" class="">术语表</a> </li> <li> <a href="https://hacks.mozilla.ac.cn/" class="external">Hacks 博客</a> </li> </ul> </dd> </dl> </div> <div class="footer__mozilla"> <a class="footer__logo" href="https://www.mozilla.org/" aria-label="Mozilla logo"><svg xmlns="http://www.w3.org/2000/svg" width="128" height="30" viewBox="0 0 256 60"><path d="m13.32 22.1 5.1 24.3h2.1l5.1-24.3H39.3v37.34h-7.26V28.46h-2.1l-6.96 30.98h-7.02L9.02 28.46h-2.1v31H-.35V22.1h13.66Zm45.12 8.74c8.73 0 13.8 5.15 13.8 14.57S67.14 60 58.44 60c-8.73 0-13.8-5.17-13.8-14.59 0-9.43 5.07-14.57 13.8-14.57m0 23.34c4.1 0 6.16-2.1 6.16-6.73v-4.12c0-4.62-2.06-6.73-6.16-6.73s-6.15 2.1-6.15 6.73v4.12c0 4.63 2.05 6.73 6.15 6.73m17.68-.14 14.82-17.26H76.32v-5.41h23.31v5.4L84.84 54.05h15.03v5.4H76.13v-5.41Zm28.07-22.67h10.7v28.07h-7.25V36.77h-3.48v-5.4zm3.44-9.27h7.26v5.4h-7.25v-5.4Zm12.62 0h10.72v37.34h-7.24V27.5h-3.48zm16.08 0h10.7v37.34h-7.25V27.5h-3.48v-5.4zm27.8 8.74c4.24 0 7.08 2.05 7.87 5.63h2.1v-5.1h8.88v5.4h-3.47v17.28h3.47v5.4h-4.25c-3 0-4.63-1.63-4.63-4.62v-.48H172c-.78 3.58-3.63 5.63-7.88 5.63-6.68 0-11.4-5.59-11.4-14.58 0-9 4.72-14.55 11.4-14.55m2.2 23.34c4.1 0 5.93-2.1 5.93-6.73v-4.12c0-4.62-1.82-6.73-5.94-6.73-3.99 0-5.92 2.1-5.92 6.73v4.13c0 4.62 1.92 6.72 5.93 6.72m46.28 5.27h-7.26V0h7.26zm6.3-28.41h30.8v-2.1l-20.4-7.32v-5.88l20.4-7.33v-2.1h-24.27V0h30.79v12l-16.62 5.63v2.11l16.61 5.64v12H218.9zm0-24.73h6.5v6.52h-6.5z"></path></svg></a> <ul> <li> <a href="https://www.mozilla.org/privacy/websites/" class="external">网站隐私声明</a> </li> <li> <a href="https://www.mozilla.org/en-US/privacy/websites/data-preferences/" class="external">遥测设置</a> </li> <li> <a href="https://www.mozilla.org/about/legal/terms/mozilla" class="external">法律</a> </li> <li> <a href="https://www.mozilla.org/about/governance/policies/participation/" class="external">社区参与指南</a> </li> </ul> <p>请访问 <a href="https://www.mozilla.org/">Mozilla 公司</a>的非营利父级组织 <a href="https://foundation.mozilla.org/">Mozilla 基金会</a>。<br />此内容的部分版权 ©1998–⁨2025⁩ 归各 mozilla.org 贡献者所有。内容受 <a href="/docs/MDN/Writing_guidelines/Attrib_copyright_license">知识共享许可协议</a> 的约束。</p> </div> </footer> </div> <div class="footer" style="padding: 2em 1em; text-align: center;"> © <script>document.write(new Date().getFullYear())</script> <i><script>document.write(location.host)</script></i>. Content available under <a href="/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>. </div></body></html>