如何将一个 iframe 的 html 内容复制到另一个 iframe，包括 CSS？答案

【问题标题】：How to copy the html contents of one iframe to another iframe including CSS?如何将一个 iframe 的 html 内容复制到另一个 iframe，包括 CSS？
【发布时间】：2016-02-17 06:12:14
【问题描述】：

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

有什么建议吗？

【问题讨论】：

标签： javascript html css iframe styles

【解决方案1】：

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/

【讨论】：

请注意，您需要在页面中包含 JQuery API 才能正常工作，方法是将 <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"> 添加到您的 <head> 标记
这不是回答问题吗？请提供一些反馈，而不是简单地投反对票，以便我可以解决您在回答中遇到的问题:)
我没有否决你的答案。我不否认你的回答。但我想一次完成所有的改变。
是的，我也不认为是你 :) 它只是针对投反对票的人。对于造成的混乱，我深表歉意。

【解决方案2】：

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

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

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

【讨论】：