如何将 iframe 内容复制到 div？答案

【问题标题】：How to copy iframe content to div?如何将 iframe 内容复制到 div？
【发布时间】：2017-04-07 17:45:29
【问题描述】：

参见下面的代码 sn-p。我希望 iframe 中的输出文本显示在 #source div 中。我正在为此苦苦挣扎，并感谢任何想法。如何将 iframe 中的输出文本复制到 div？（脚本在 div #show 中写入“Can see text!” if div #sourcediv contains “Text”，否则“Cannot see text！”。）

<html>
<body>

<div id="source"></div>
<div id="show"></div> 

<script> 
if (document.getElementById('source').innerHTML.indexOf("Text") != -1)
{document.getElementById('show').innerHTML="Can see text!";}
else{document.getElementById('show').innerHTML="Cannot see text!";}
</script>

<iframe id="iframe" src="http://majaulrika.esy.es/text.txt">

</body>
</html>

【问题讨论】：

iframe 的域是否与您的网站相同？如果没有，您可以更改 iframe 的网站内容吗？答案不是，所以你不能。
@Mosh Feu iframe 的域名和我的网站一样。
我建议不要使用 iframe，这已经不是 1999 年了。现在他们有一个有用的目的，异步文件上传。由于您标记了 php，请尝试file_get_contents()
@Xorifelse 在我的原始代码中，我将一个 php 脚本发布到 iframe 元素，以避免页面重新加载。这就是我使用 iframe 的原因。
现在，我们使用 Ajax 来避免页面刷新。

标签： javascript php html iframe

【解决方案1】：

请记住，您的 iframe 与您的页面位于同一域：

// Get your iframe element

var iframe = document.getElementById('iframe');

// Access contents of it like this

var iframeContent = iframe.contentWindow.document;

// Get your div element

var content = document.getElementById('source');

// set contents of this div to iframe's content

content.innerHTML = iframeContent.innerHTML;

根据您执行此操作的时间，等待 iframe 加载也可能值得：

iframe.onload = function() { /* put the above code here */ }

【讨论】：

感谢您的意见。不幸的是，我没有让它工作。我把就在 body 标签的上方。我究竟做错了什么？谢谢！

【解决方案2】：

进一步你的comment：

从文件中获取内容的更好解决方案是使用 ajax。

这里是使用 ajax 和 jQuery 的简单方法。

$.ajax({
  url: 'http://output.jsbin.com/sebusu',
  success: function(data) {
    $('#source').html(data);
    $('#show').text(function(){
      if (data.indexOf('Text') != -1) {
        return 'Can see text!';
      }
      else {
        return "Can't see text!";
      }
    });
  },
  error: function(){
    console.log(error);
  }
});

<div id="source"></div>
<div id="show"></div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Live Demo

再次，您只能为您的网站调用 ajax（有一些 exceptions）

【讨论】：

您的代码有效！但我的目的不是从 iframe 的源文件中读取，而是从 iframe 中的内容中读取。为什么我首先询问将 iframe 内容复制到 div 的方法，是因为我有一个表单
发布输出我想要在 iframe 中。 php 文件获取包含我的搜索词的所有行，并且输出显示在 iframe 中（我想将内容复制到 div 的 iframe）。我希望不要太混乱！所以，我的问题仍然存在......（见下面的继续评论）
（续评论：）基本上，我想做的是搜索文本文件并获取包含搜索词的所有行。根据行包含的内容，我想要不同的结果。示例：文本文件内容：“A1(on one line) B1(another line) B2(another line)” 如果我搜索“A”，我想显示一个文本说“You got 1!”如果我搜索“B”，我想显示一个文本字符串，上面写着“嘿，你得到了 1 和 2！ ” 我非常感谢您的所有意见！有什么想法吗？
所以不要在 iframe 中打开它，只需使用 ajax 调用 search.php，获取数据并使用此数据编写一些 HTML，或者您可以在服务器中创建 HTML 和 ajax 的回调将其写入 DOM。精明吗？

【解决方案3】：

$("#my_iframe").on('load', function() {
$("#my_div").empty().append($('#my_iframe').contents().find('body').html());
});

注意：'body' 可以是 iframe 内的任何内容，如果您只想要一个特定的 div，您可以使用 'body' 执行 '#div_inside_iframe' 而不是 'body' 或 'html' 将 iframe 内的所有内容复制到目标 div。

【讨论】：