使用 window.open 时检测页面何时通过 Javascript 加载用 JS 打开窗口...</desc> <question vote="0"> <p>我在 SO <a href="https://stackoverflow.com/questions/3960193/javascript-to-detect-when-a-page-has-loaded-in-another-window-in-firefox">1</a>、<a href="https://stackoverflow.com/questions/2145619/how-can-we-know-when-pop-up-window-url-is-loaded-window-open">2</a> 中查看了其他解决方案，但没有一个解决方案对我有用。考虑以下代码：</p> <pre><code><!DOCTYPE html> <html> <head> <title>Opening window with JS</title> <script> const openWindow = () => { const win = window.open('', '_blank', 'top=20, left=20, width=200, height=200'); win.document.addEventListener('DOMContentLoaded', () => { console.info('Child window loaded'); win.document.body.style.background = 'hotpink'; }); } document.addEventListener('DOMContentLoaded', (_) => { document.getElementById('open').addEventListener('click', (_) => openWindow()) }) </script> </head> <body> <button id="open">Open window</button> </body> </html> </code></pre> <p>当窗口打开时，我没有看到任何登录到控制台的内容，页面的背景也没有改变。</p> <p>我也尝试将此添加到我的<pre><code><script></code></pre>标签中：</p> <pre><code>const openWindow = () => { const win = window.open('', '_blank', 'top=20, left=20, width=200, height=200'); win.onload = () => { console.info('Child window loaded'); win.document.body.style.background = 'hotpink'; }; } document.addEventListener('DOMContentLoaded', (_) => { document.getElementById('open').addEventListener('click', (_) => openWindow()) }) </code></pre> <p>那也不行。所以下一步是尝试将 JS 嵌入到新打开的窗口的 HTML 中（<pre><code><\/script></code></pre> 不是错字，它必须在字面上转义）：</p> <pre><code> const openWindow = () => { const win = window.open('', '_blank', 'top=20, left=20, width=200, height=200'); win.document.write(` <!DOCTYPE html> <html> <head> <title>Child window</title> <script> const handleOnLoad = () => { console.info('Child window loaded'); window.body.style.background = 'hotpink'; } <\/script> </head> <body onload="handleOnLoad"> </body> </html> `); } document.addEventListener('DOMContentLoaded', (_) => { document.getElementById('open').addEventListener('click', (_) => openWindow()) }) </code></pre> <p>然而，这并没有让我更接近。我该如何进行？</p> </question> <answer tick="false" vote="0"> <h3>时间问题</h3> <p>代码的问题可能是它试图在加载之前向子窗口的文档添加<pre><code>DOMContentLoaded</code></pre>事件侦听器。这意味着事件监听器实际上并没有添加成功。</p> <p>解决这个问题的一种方法是将事件监听器移动到子窗口的 HTML 代码中，并调用父窗口中定义的函数来更改背景颜色。</p> </answer> <answer tick="false" vote="0"> <p>需要使用document.readyState方法等待<strong>complete</strong>:</p> <p>有关信息，document.readyState<strong>complete</strong>：</p> <blockquote> <p>文档和所有子资源加载完成。该状态表示加载事件即将触发。</p> </blockquote> <p>您可以通过添加 <strong>setInterval</strong> 检查新窗口 readState 何时等于 <strong>complete</strong> 并在 readystate 为 <strong>complete</strong> 时清除 setInterval() 来解决您的问题。</p> <pre><code><!DOCTYPE html> <html> <head> <title>Opening window with JS</title> <script> const openWindow = () => { const win = window.open('', '_blank', 'top=20, left=20, width=200, height=200'); const intervalId = setInterval(() => { if (win.document.readyState === 'complete') { clearInterval(intervalId); console.info('Child window loaded'); win.document.body.style.background = 'hotpink'; } }, 100); }; document.addEventListener('DOMContentLoaded', () => { const openButton = document.getElementById('open'); openButton.addEventListener('click', () => { const win = openWindow(); }); }); </script> </head> <body> <button id="open">Open window</button> </body> </html> </code></pre> </answer> </body></html>