iFrame : How to display a server response (HTML) directly into iFrame using javascript?

Question

I am getting a simple server response which is an html file and I want to display the same in iFrame without saving the file to my workspace or machine.

I am making an ajax call as below.

                   Ext.Ajax.request({
                        url : 'url',
                        method : 'POST',
                        success : function(response) {

                        var responseHtmlStr =response.responseText;

Sample Server response which I am getting in responseHtmlStr is as below.

<!DOCTYPE html>
<html>
<head>
<script>
function copyText()
{
alert('It is clicked');
}
</script>
</head>
<body>

Field1: <input type="text" id="field1" value="Hello World!"><br>
Field2: <input type="text" id="field2">
<br><br>
<button onclick="copyText()">Copy Text</button>

</body>
</html>

The code I am using to create the iFrame is as below.

;

As I dont want to store the server response in the server in a file. How to directly feed the server response in the iFrame?

I tried document.getElementsByTagName('iframe')[0].contentWindow.document.write(serverResponse); but it is not working with the above code.

Any other suggestions please. Thanks in advance.

Thanks Gendaful

The current page *is* the server response. Do you want to copy the current page content to the Iframe? — Diodeus - James MacFarlane, Mar 12 '13 at 19:38
How are you generating your response? Are you using a framework, or are you writing the AJAX call yourself? — Gareth Cornish, Mar 12 '13 at 19:38
Also, do you need to make a POST request, or will a GET request do? — Gareth Cornish, Mar 12 '13 at 19:44
@Diodeus : Yes. The html shown above is the server response. I want to show it in the iFrame. My main confusion is to how to feed the server response directly to iFrame. I have kept a code here so you may try it. http://www.senchafiddle.com/#GBOYZ — Gendaful, Mar 12 '13 at 21:13
@GarethCornish : I am making an ajax call and getting the html as mentioned above. My only confusion is to how to set it in an iFrame.I have edited my post above. So my query is how to set responseHtmlStr in an iFrame. — Gendaful, Mar 12 '13 at 21:19
Ah! Ok. Makes sense now. This should help: http://stackoverflow.com/questions/2229751/iframes-with-jquery — Diodeus - James MacFarlane, Mar 12 '13 at 21:22
Hi @Diodeus : Thanks for the help. Sorry I am new to this so asking some basic questions. First of all, I am not using jQuery. I am declaring the iFrame as mentioned above. So, how to set the contents using '.contents().find("body").append("html")' . I mean how to get the instance of that iFrame ? — Gendaful, Mar 12 '13 at 21:31
document.MyFrame.document.body.innerHTML = serverResponse, where you have — Diodeus - James MacFarlane, Mar 12 '13 at 21:38
Thanks a lot @Diodeus . It worked like a charm. Please move your comments to the answer so I can accept the answer. — Gendaful, Mar 12 '13 at 21:58
OK, done. I've used this technique to make printable sub-sections of pages. Copy over a DIV, then print from the Iframe. — Diodeus - James MacFarlane, Mar 13 '13 at 14:16

score 6 · Accepted Answer · answered Mar 13 '13 at 14:14

6

With vanilla JavaScript:

document.MyFrame.document.body.innerHTML = serverResponse

..where you have <iframe name="MyFrame"></iframe>

answered Mar 13 '13 at 14:14

Diodeus - James MacFarlane

112,730
33
157
176

score 0 · Answer 2 · answered Mar 12 '13 at 19:34

0

Not sure if this will work, I do something similar using jquery (but could do it just as easily without)...

$('iframe').contents().find("html")
    .append($("<head></head><body> blah blah blah </body>"));

answered Mar 12 '13 at 19:34

SimpleSam5

3,280
2
16
13

iFrame : How to display a server response (HTML) directly into iFrame using javascript?

2 Answers2

Linked