CSS 如何使用 Javascript 访问另一个页面的元素

在本文中，我们将介绍如何使用 Javascript 来访问另一个页面的元素。通过这种方法，我们可以在当前页面中操作并获取另一个页面的特定元素，从而实现更丰富、交互性更强的网页效果。

阅读更多：CSS 教程

使用 Javascript 访问另一个页面的元素

在使用 Javascript 访问另一个页面的元素之前，我们首先需要了解两个重要的概念：跨文档通信和 DOM。

1. 跨文档通信（Cross-Document Communication）
跨文档通信是指在一个页面中通过 Javascript 与不同源的另一个页面进行通信的过程。在 Web 开发中，由于浏览器的同源策略，页面只能与同一域名下的其他页面进行通信，跨文档通信提供了一种突破这种限制的方式。

2. 文档对象模型（Document Object Model, DOM）
文档对象模型是浏览器将 HTML 和 XML 文档表示为树结构的方式。通过 DOM，我们可以使用 Javascript 操作和访问页面中的元素。

接下来，我们将介绍两种通过 Javascript 访问另一个页面元素的方法：iframe 和跨文档通信。

1. 使用 iframe 元素

iframe 元素是 HTML 中一种内嵌框架的标签，可以用来在当前页面中加载另一个页面。通过给 iframe 设置一个唯一的 id，我们可以在 Javascript 中获取该 iframe 元素，并通过其 contentWindow 属性获取到另一个页面的 window 对象，从而对另一个页面进行操作。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Parent Page</title>
</head>
<body>
  <iframe id="childFrame" src="child.html"></iframe>

  <script>
    var childIframe = document.getElementById("childFrame");
    var childWindow = childIframe.contentWindow;

    // 在子页面中查找 id 为 "targetElement" 的元素，并修改其内容
    var targetElement = childWindow.document.getElementById("targetElement");
    targetElement.innerHTML = "Hello, World!";
  </script>
</body>
</html>

上述代码中，我们在父页面中使用 iframe 元素加载子页面 child.html。在 Javascript 中，我们通过 getElementById 方法获取到子页面的 window 对象，并通过该对象的 document.getElementById 方法获取到子页面中 id 为 “targetElement” 的元素，并修改其内容为 “Hello, World!”。

2. 跨文档通信

无论是使用 iframe 还是其他方式加载另一个页面，我们都可以使用跨文档通信来实现两个页面之间的交互。跨文档通信主要有两种机制：postMessage 和 WebSocket。

postMessage：
postMessage 是 HTML5 中新增的一种用于实现跨文档通信的方法。它允许在不同源的页面之间传递字符串数据。通过在发送消息页面中使用 window.postMessage 方法发送消息，并在接收消息页面中通过监听 message 事件来接收消息，可以实现双向的跨文档通信。

发送消息页面的代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sender Page</title>
</head>
<body>
  <script>
    var receiver = window.opener;

    // 向接收消息页面发送消息
    receiver.postMessage("Hello, World!", "http://localhost:8080");
  </script>
</body>
</html>

接收消息页面的代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Receiver Page</title>
</head>
<body>
  <script>
    // 监听来自发送消息页面的消息
    window.addEventListener("message", function(event) {
      if (event.origin === "http://localhost:8080") {
        console.log(event.data);
      }
    });
  </script>
</body>
</html>

通过在发送消息页面中使用 window.postMessage 方法，我们可以向指定源的页面发送消息。在接收消息页面中，我们通过监听 message 事件并判断消息的来源(event.origin)，对来自指定源的消息进行处理。

WebSocket：
除了 postMessage 方法，我们还可以使用 WebSocket 来实现跨文档通信。WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它允许在不同源的页面之间建立持久的、实时的通信连接。

使用 WebSocket 来实现跨文档通信的代码较复杂，我们在此不再详细介绍。

示例说明

下面的示例说明了如何使用以上两种方法实现跨文档通信，以访问另一个页面的元素并修改其内容。

示例一：使用 iframe

我们在父页面中添加一个 iframe 元素，并加载子页面 child.html。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Parent Page</title>
</head>
<body>
  <iframe id="childFrame" src="child.html"></iframe>

  <script>
    var childIframe = document.getElementById("childFrame");
    var childWindow = childIframe.contentWindow;

    // 在子页面中查找 id 为 "targetElement" 的元素，并修改其内容
    var targetElement = childWindow.document.getElementById("targetElement");
    targetElement.innerHTML = "Hello, World!";
  </script>
</body>
</html>

子页面 child.html 的代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Child Page</title>
</head>
<body>
  <div id="targetElement">This is the target element.</div>
</body>
</html>

当父页面加载完成后，它会获取到 iframe 元素，并通过该元素的 contentWindow 属性获取到子页面的 window 对象。然后，父页面就可以操作子页面中 id 为 “targetElement” 的元素，将其内容修改为 “Hello, World!”。

示例二：跨文档通信

我们创建两个 HTML 文件：sender.html 和 receiver.html。在 sender.html 中，我们使用 window.postMessage 方法向 receiver.html 发送消息，在 receiver.html 中，我们通过监听 message 事件来接收来自 sender.html 的消息。

sender.html 的代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sender Page</title>
</head>
<body>
  <script>
    var receiver = window.opener;

    // 向接收消息页面发送消息
    receiver.postMessage("Hello, World!", "http://localhost:8080");
  </script>
</body>
</html>

receiver.html 的代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Receiver Page</title>
</head>
<body>
  <script>
    // 监听来自发送消息页面的消息
    window.addEventListener("message", function(event) {
      if (event.origin === "http://localhost:8080") {
        console.log(event.data);
      }
    });
  </script>
</body>
</html>

在 sender.html 页面中，我们使用 window.postMessage 方法向指定源的 receiver.html 页面发送消息。在 receiver.html 页面中，我们通过监听 message 事件来接收来自 sender.html 页面的消息，并在控制台中打印出来。

通过这个示例，我们可以看到，通过跨文档通信的方式，我们可以在不同的页面之间进行双向的、实时的通信。