如何修改iframe中的dom?

最新推荐文章于 2024-11-30 09:00:00 发布

一个前端小朋友

最新推荐文章于 2024-11-30 09:00:00 发布

阅读量1k

点赞数 11

文章标签： javascript 前端

本文链接：https://blog.csdn.net/zfz5720/article/details/136527718

版权

要修改 iframe 中的 DOM 元素，可以通过以下步骤来实现：

获取到 iframe 元素：首先使用 JavaScript 获取到包含 iframe 的父容器元素，然后通过该父容器元素的 querySelector 方法来获取到 iframe 元素。

const iframe = document.querySelector('#your-iframe-id');

获取 iframe 中的 document 对象：通过 iframe 元素的 contentDocument 属性可以获取到 iframe 中的 document 对象，从而可以对其中的 DOM 元素进行操作。

const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

修改 iframe 中的 DOM 元素：现在可以通过 iframeDocument 对象对 iframe 中的 DOM 元素进行操作，例如修改文本内容、样式等。

// 修改 iframe 中某个元素的文本内容
const elem = iframeDocument.querySelector('#element-id');
elem.textContent = '新内容';

// 修改 iframe 中某个元素的样式
const elem2 = iframeDocument.querySelector('#element-id2');
elem2.style.color = 'red';

通过上述步骤，你可以获取到 iframe 中的 document 对象，并对其中的 DOM 元素进行修改。
请注意，跨域限制可能会影响对 iframe 中内容的操作，确保你有权限对 iframe 内容进行修改

例子 index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Parent Page</title>
</head>
<body>
  <iframe id="myIframe" src="child.html" width="200" height="200"></iframe>

  <script>
    // 获取 iframe 元素
    const iframe = document.getElementById('myIframe');

    // 获取 iframe 中的 document 对象
    const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

    // 等待 iframe 中的内容加载完成后再修改
    iframe.onload = function() {
      // 修改 iframe 中元素的文本内容
      const elem = iframeDocument.querySelector('#content');
      elem.textContent = '这是修改后的文本内容';

      // 修改 iframe 中元素的样式
      const elem2 = iframeDocument.querySelector('#element');
      elem2.style.color = 'red';
    };
  </script>
</body>
</html>

child.html

<!DOCTYPE html>
<html>
<head>
  <title>Child Page</title>
</head>
<body>
  <div id="content">原始文本内容</div>
  <div id="element">需要修改颜色的元素</div>
</body>
</html>