JavaScript 无法读取新打开 HTML 页面中的元素

本文旨在解决 JavaScript 无法读取通过 window.open() 打开的新 HTML 页面中的元素的问题。主要涵盖了同源策略下的 DOM 访问以及如何利用 DOMContentLoaded 事件来确保在 DOM 加载完成后再进行元素访问。同时，也强调了跨域情况下的 DOM 访问限制，并澄清了 <script> 标签引入与窗口连接之间的区别。

在使用 JavaScript 操作 DOM 时，经常会遇到需要访问通过 window.open() 打开的新窗口中的元素的情况。然而，直接访问新窗口的 DOM 元素可能会失败。以下是一些常见原因以及解决方案。

同源策略与 DOM 访问

首先，要考虑同源策略。同源策略是浏览器的一项关键安全机制，它限制了来自不同源的文档或脚本对彼此资源的访问。源由协议、域名和端口三部分组成。如果两个页面的这三部分都相同，则认为它们具有相同的源。

如果你的代码尝试访问的新窗口与当前窗口具有相同的源，那么你可以访问它的 DOM。但是，你需要确保在访问 DOM 之前，新窗口的 DOM 已经完全加载。

立即学习“Java免费学习笔记（深入）”；

使用 DOMContentLoaded 事件

为了确保在新窗口的 DOM 加载完成后再访问其元素，可以使用 DOMContentLoaded 事件。该事件在新窗口的文档完全加载和解析完毕后触发。

以下是一个示例：

const printWindow = window.open("http://10.180.101.58:5500/new.html", "Print");

printWindow.addEventListener("DOMContentLoaded", () => {
  const myVar = printWindow.document.getElementById("q1");
  // 在这里使用 myVar，例如修改它的内容
  if (myVar) {
      myVar.textContent = "Hello from parent window!";
  } else {
      console.error("Element with ID 'q1' not found in the new window.");
  }
});

在这个例子中，我们首先使用 window.open() 打开一个新的窗口。然后，我们为新窗口的 document 对象添加一个 DOMContentLoaded 事件监听器。当事件触发时，我们就可以安全地使用 printWindow.document.getElementById() 来获取新窗口中的元素，并进行后续操作。

MagicStudio

图片处理必备效率神器！为你的图片提供神奇魔法

102

查看详情

跨域情况下的 DOM 访问限制

如果你的代码尝试访问的新窗口与当前窗口不具有相同的源，那么由于同源策略的限制，你将无法直接访问它的 DOM。这是浏览器为了防止恶意脚本窃取用户数据而采取的安全措施。

在跨域情况下，你需要考虑其他的解决方案，例如使用 postMessage API 进行跨文档通信，或者通过服务器端代理来获取数据。

关于 <script> 标签的误解

需要注意的是，在多个 HTML 页面中使用相同的 <script src="DemoCode.js"></script> 标签，并不会自动将这些页面连接起来。它只是简单地将 DemoCode.js 文件中的代码加载到每个页面中执行。每个页面仍然是独立的，并且受到同源策略的限制。

总结

在 JavaScript 中访问通过 window.open() 打开的新窗口的 DOM 元素时，需要考虑同源策略和 DOM 加载完成的时机。使用 DOMContentLoaded 事件可以确保在 DOM 加载完成后再进行元素访问。如果遇到跨域问题，则需要采用其他的解决方案。

以上就是JavaScript 无法读取新打开 HTML 页面中的元素的详细内容，更多请关注php中文网其它相关文章！