如何在 JavaScript 中获取 iframe 的内容主体？

我们使用 getIframeContent(frameId) 在 JavaScript 中获取 iframe 的对象引用。

要获取 iframe 中的元素，首先我们需要使用 document.getElementById() 方法通过传递 iframe id 作为参数来访问 JavaScript 中的 <iframe> 元素。

使用 iframe 标签

HTML 中的 <iframe> 标签指定了一个内联框架。此内联框架用于在当前 HTML 文档中嵌入另一个文档。

<iframe> 元素在所有浏览器中都受支持，例如（Google Chrome、Microsoft Edge/Internet Explorer、Firefox、Safari 和 Opera）。

我们在 <iframe> 标签中使用 srcdoc 属性来指定要在 <iframe> 中显示的页面的 HTML 内容。

srcdoc 属性将 HTML_code 作为值，并指定要在 <iframe> 中显示的页面的 HTML 内容。

以下是我们使用 <iframe> 标签和 srcdoc 属性在 HTML 中指定要在 <iframe> 中显示的页面的 HTML 内容的示例。

现在让我们逐一查看这些示例。

示例

以下是使用 iframe 创建窗口的示例程序。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <iframe id = "myId" name = " myId ">...</iframe>
   <script>
      var myDoc;
      if (window.frames && window.frames. myId && (myDoc = window.frames. myId.document)) {
         var iframeBody = myDoc.body;
         var content = iframeBody.innerHTML;
      }
   </script>
</body>
</html>

示例

以下是将内容放置在 iframe 创建的窗口中的示例程序。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>
      How to get HTML content of
      an iFrame using javascript?
   </title>
</head>
<body>
   <iframe id="frameID" src="Untitled-2.html">
   </iframe>
   <a href="#" onclick=
      "getIframeContent('frameID');">
      Get content of Iframe
   </a>
   <script>
      function getIframeContent(frameID) {
         var frameObj = document.getElementById(frameID);
         var frameContent = frameObj.contentWindow.document.body.innerHTML;
         alert("frame content : " + frameContent);
      }
   </script>
</body>
</html>

Undefined.html

<!DOCTYPE html>
<html>
<body>
   got the body's content of an iframe in JavaScript
</body>
</html>

单击“获取内容”后，将弹出一个窗口显示 iframe 的内容。

更新于： 2022-11-21

22K+ 浏览量

启动你的 职业生涯

通过完成课程获得认证

开始学习
广告