JS如何对Iframe内外页面进行操作总结

2023年6月11日上午8:26 • JavaScript

下面是JS如何对Iframe内外页面进行操作总结的完整攻略：

1. 通过window.parent获取父级页面对象并进行操作

window.parent用于获取当前iframe的父级页面对象，通过它可以调用父级页面的函数或属性进行操作。以下是一个示例进行说明：

<!-- 父级页面index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父级页面</title>
</head>
<body>
  <h1>父级页面</h1>
  <iframe src="child.html" id="child"></iframe>
  <script>
    function sendMessageToIframe() {
      var iframeWindow = document.getElementById("child").contentWindow;
      iframeWindow.postMessage("来自父级页面的消息", "*");
    }

    function receiveMessage(event) {
      console.log("收到来自iframe的消息", event.data);
    }

    window.addEventListener("message", receiveMessage, false);
  </script>
</body>
</html>

<!-- 子级页面child.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>子级页面</title>
</head>
<body>
  <h1>子级页面</h1>
  <script>
    function sendMessageToParent() {
      window.parent.postMessage("来自子级页面的消息", "*");
    }
  </script>
</body>
</html>

在父级页面中，我们通过contentWindow属性获取子级页面窗口对象，并使用postMessage方法向子级页面发送消息。在子级页面中，我们使用window.parent获取父级页面窗口对象，并使用postMessage方法向父级页面发送消息。当收到来自子级页面的消息后，父级页面的receiveMessage方法会被触发，并打印收到的消息。

这里需要注意的是，postMessage方法需要两个参数，第一个参数为要发送的消息，第二个参数表示要接收消息的窗口对象，这里用通配符指定为任意窗口。

2. 通过window.frames获取子级页面对象并进行操作

window.frames用于获取当前页面中所有的iframe窗口对象，可以通过它获取指定的子级页面对象并进行操作。以下是一个示例进行说明：

<!-- 父级页面index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父级页面</title>
</head>
<body>
  <h1>父级页面</h1>
  <iframe src="child.html" id="child"></iframe>
  <script>
    function changeIframeContent() {
      var iframeDocument = window.frames["child"].document;
      var iframeBody = iframeDocument.body;
      iframeBody.innerHTML = "<h2>子级页面已被修改</h2>";
    }
  </script>
</body>
</html>

<!-- 子级页面child.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>子级页面</title>
</head>
<body>
  <h1>子级页面</h1>
</body>
</html>

在父级页面中，我们通过window.frames获取指定id为“child”的iframe窗口对象，并使用它的document属性来获取子级页面的文档对象，进而修改子级页面的内容。在本例中，我们修改了子级页面的body标签中的内容，将原来的“子级页面”修改为“子级页面已被修改”。

需要注意的是，通过window.frames获取子级页面对象时，需要传入子级页面iframe的id属性。如果子级页面中没有为iframe设置id，则可以通过window.frames[n]的方式获取，其中n为iframe在页面中的序号。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS如何对Iframe内外页面进行操作总结 - Python技术站