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

Question

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

有什么建议吗？

Answer 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/

Answer 2

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

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

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

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

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

html

javascript

css

iframe

styles