Question

我正在处理一个显示数据库字段内容的页面。内容采用HTML格式，包含整个网页

<html>
  <title>Some title</title>
  <style type="text/css">
     /* CSS content here */
  </style>
  <body>
    <!-- body content here -->
  </body>
</html>

我需要在另一个网页中显示所有内容，所以我认为使用iframe可以让我从父页面中否定任何css。但是，我无法弄清楚如何覆盖iframe文档的内容。

到目前为止我所做的是检索数据，然后使用以下

$("#iframe_constainer")
  .find('iframe:first').contents().find('html:first').html(myHTML);

我的网页包含一个名为iframe_container的div，其中包含一个iframe。

<div id="iframe_container"><iframe/></div>

这项工作正常，但myHTML的内容已包含在html个标记内。所以效果就像这样

<html>
  <html>
    <title>Some title</title>
    <style type="text/css">
       /* CSS content here */
    </style>
    <body>
      <!-- body content here -->
    </body>
  </html>
</html>

我知道这是因为我在iframe中找到了html标签并更改了HTML。有没有办法用jQuery覆盖整个文档？

Answer 1

你真的不需要jQuery，只需使用document.write将内容写入iframe以完全替换iframe的文档。

E.g。（简单的香草JS）

document.getElementById("myIframeId").contentWindow.document.write(myHTML);

Answer 2

打开文档然后再关闭将解决附加内容的问题

var iframe = document.getElementById('iframeID');
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(htmlData);
iframe.contentWindow.document.close();

替换iframe文档的HTML源代码

2 个答案: