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=".txt">
</body>
</html>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>- 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 Commented Nov 23, 2016 at 16:08
- @Mosh Feu The iframe's domain is the same as my website. – mud Commented Nov 23, 2016 at 16:11
-
2
I remend 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()– Xorifelse Commented Nov 23, 2016 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 Commented Nov 23, 2016 at 16:19
- 1 Nowadays, we use Ajax to avoid a page refresh. – Xorifelse Commented Nov 23, 2016 at 16:23
2 Answers
Reset to default 1Keeping 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 */ }
Further your ment:
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./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./jquery-3.1.0.js"></script>
Live Demo
Again, you can call ajax only for your website (with some exceptions)