如何将一个 iframe 的 html 内容复制到另一个 iframe(包括 CSS）

How to copy the html contents of one iframe to another iframe including CSS?

本文关键字：iframe 复制 另一个 CSS 包括 html 一个      更新时间：2023-09-26

我正在编写一个包含两个iframe的HTML网页，比如iframeA和iframeB。我经常需要使用 JavaScript 将 iframeA 的 HTML 内容复制到 iframeB 的 HTML 内容中。使用document.body.innerHTML属性，我可以复制内容，但我不知道。如何将 iframeA 的每个元素的 style（CSS） 属性复制到 iframeB 中？

有什么建议吗？

JQuery的.css（）可以做到这一点：http://api.jquery.com/css/

例如，您可以执行以下操作：

function copyCss() {
   var iframeABackgroundColor = $('#iframeAElementID').css("background-color");
   $('#iframeBElementID').css("background-color", iframeABackgroundColor); }

JSFiddle 演示概念：https://jsfiddle.net/xbdk0jy9/1/

我找到了问题的解决方案。我在两个iframe的HTML中<body>标签中使用了<div>标签。所以我的 iframe HTML 内容在<div>标签内，如下所示：

<html>
<body>
<div id = "mydiv">
  //Body contents
</div>
</body>
<html>

然后我使用 importNode（） 和 replaceChild（） API 将 iframeB 的节点<div>替换为<div> iframeA 的节点。这将处理 <div> 标记下的所有 HTML 元素及其样式。无需迭代每个元素来检查和复制样式。

相关文章：