Question

请参阅下面的代码段。我希望iframe中的输出文本显示在#source div中。我很喜欢这个，我很感激任何想法。如何将iframe中的输出文本复制到div？（脚本写入＆＃34;可以看到文本！＆＃34;在div #show中，如果div #sourcediv包含＆＃34; Text＆＃34;，else＆＃34;看不到文本！＆＃34;。）< / p>

＆＃13;

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

＆＃13;

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

Answer 2

继续comment：

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

这是一个在jQuery中使用ajax的简单方法。

$.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内容复制到div？

2 个答案: