5

See code snippet below. I want the output text in the iframe to show in the #source div. I’m struggeling with this, and am grateful for any ideas. How can I copy the output text in the iframe to a div? (The script writes "Can see text!" in div #show if div #sourcediv contains "Text", else "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>
mud
  • 73
  • 1
  • 1
  • 6
  • 4
    Is the iframe's domain is the same as your website? If not, can you change the iframe's website content? the answer is not, so you can't. – Mosh Feu Nov 23 '16 at 16:08
  • @Mosh Feu The iframe's domain is the same as my website. – mud Nov 23 '16 at 16:11
  • 2
    I recommend to not use iframes, this isn't the year 1999 anymore. Now a days they have one useful purpose, async file uploading. Since you tagged php, try [`file_get_contents()`](http://php.net/manual/en/function.file-get-contents.php) – Xorifelse Nov 23 '16 at 16:14
  • @Xorifelse In my original code I post a php script to an iframe element, for avoiding page reload. That's why I use iframe. – mud Nov 23 '16 at 16:19
  • 1
    Nowadays, we use Ajax to avoid a page refresh. – Xorifelse Nov 23 '16 at 16:23
  • @mud keep it mind that the iframe is to a `.txt` file so you can't call `document.getElementById` or something. Further to @Xorifelse's comment, just use ajax. It's faster, it's modern - in short: much better. And with jQuery it's also very easy. http://api.jquery.com/jquery.ajax/ – Mosh Feu Nov 23 '16 at 16:29
  • @mosh feu (and Xorifelse) Thanks for input! I'm very new to all this, trying to set up a platform for a museum on my free time. In my example, how could I use Ajax and end up with the php output in a div? – mud Nov 23 '16 at 16:55
  • @mud I answer your with ajax. Take a look. Let me know if you OK. – Mosh Feu Nov 24 '16 at 08:36

3 Answers3

0

Keeping in mind that your iframe is on the same domain as your page:

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

Depending on when you're doing this, it also might be worth to wait till the iframe loads:

iframe.onload = function() { /* put the above code here */ }
Oleg Berman
  • 664
  • 5
  • 18
  • Thanks for your input. Unfortunately i don't get it to work. I put just above the body tag. What am I doing wrong? Thanks! – mud Nov 23 '16 at 16:48
0

Further your comment:

A better solution to get a content from file is to use ajax.

Here is a simple approach of using ajax with 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

Again, you can call ajax only for your website (with some exceptions)

Community
  • 1
  • 1
Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
  • Your code workes! But my aim was not to read from the source file of the iframe, but from the content in the iframe. Why I asked in the first place, for a way to copy iframe content to the div, was because I have a form
    that posts the output I want in an iframe. The php file fetches all lines containing my search word and the output shows in an iframe (the iframe I wanted to copy content from to a div). Not too confusing I hope! So, my problem remains...(see cont. comment below)
     – mud Nov 25 '16 at 12:06
  • (Cont. comment:) Basically, what I want to do is searching a text file and get all lines containing the search word. Depending on what the line(s) contain(s) I want different outcomes. Example: Text file content: "A1(on one line) B1(another line) B2(another line) " If I search for ”A” I want to display a text saying ”You got 1!” If I search for ”B” I want to display a text string saying ”Hey, you got 1 and 2! ” I very much appreciate all your input! Any ideas? – mud Nov 25 '16 at 12:07
  • So instead of open it in iframe, just call to `search.php` with ajax, fetch the data and write some HTML with this data, or you can create the HTML in the server and the ajax's callback just write it to the DOM. Savvy? – Mosh Feu Nov 27 '16 at 08:37
-1
setTimeout(function() {
$("#my_div").empty().append($('#my_iframe').contents().find('body').html());
}, 2000);

Note: adjust (increase or decrease) the setTimeout to occur after the iframe has loaded.

Dexter
  • 74
  • 8