jQuery add iFrame with content

Question

I've such a problem. I need to open iframe in fancybox (I require iframe because I need to browse through links in the opened document and stay in fancybox), but I want to put content into iframe from variable, not through src attribute (I've already got content by AJAX (I need to do some checks on content before putting it to iframe, so there are no way to do it instead of AJAX query), so I do not need one more query).

Fancybox does not allow to use 'content' attribute with 'type':'iframe'. So I decided to create iframe dynamically, insert my content into it, and show iframe by fancybox as a regular block.

It's like

jQuery('<iframe id="someId"/>').appendTo('body').contents().find('body').append(content);

And than

jQuery('<iframe id="someId"/>').fancybox();

But the first part does not work. I can see the iframe that was added to page but without any content (I have full HTML page in variable content, but when I try to append just some text it doesn't work as well).

What I've done wrong?

Maybe there is another way to do what I need?

Had the same problem, could you please tell me if you fixed the above issue @krasilich — Anil kumar, Aug 30 '13 at 05:05

score 18 · Answer 1 · edited Nov 17 '12 at 12:15

18

your problem will be solve after calling jquery's ready method like this

<script type="text/javascript">
$(function(){
$('<iframe id="someId"/>').appendTo('body');
$('#someId').contents().find('body').append('<b>hello sajjad</b>');
});
</script>

<iframe id="someId"></iframe>

edited Nov 17 '12 at 12:15

Asad Saeeduddin

46,193
6
90
139

answered Oct 28 '11 at 22:48

sajjad hussain

181
1
6

Related link: http://stackoverflow.com/questions/1591135/why-does-appending-a-script-to-a-dynamically-created-iframe-seem-to-run-the – Jaider Feb 12 '13 at 23:11

Marcus Whybrow · Answer 2 · 2011-01-06T13:15:31.683

4

What happens if you split that line in two:

jQuery('<iframe id="someId"/>').appendTo('body');
jQuery('#someId').contents().find('body').append(content);

Then change your selector to be correct, before it was creating a new iframe, not inserting it in the DOM and the calling fancybox on it, however this should work:

jQuery('#someId').fancybox();

edited Jan 06 '11 at 13:15

answered Jan 06 '11 at 12:29

Marcus Whybrow

19,578
9
70
90

I can see empty iframe in the bottom of my page. I put in content simple text (var content = 'Text in Iframe'). And there are no errors in firebug. Element body in iFrame is empty – krasilich Jan 06 '11 at 12:41
@krasilich Have you tried the code I suggested? I have edited my answer with a new discovery. – Marcus Whybrow Jan 06 '11 at 12:49
var content = 'Text in iframe'; jQuery('').appendTo('body') jQuery('#someId').contents().find('body').append(content); jQuery('#someId').fancybox(); That's what I run in firebug console – krasilich Jan 06 '11 at 12:54
Fantastic! What happened. It seems like there may be other problems involved. Test if jQuery is available by simply executing the line `jQuery` in firebug, if available if should return a function. – Marcus Whybrow Jan 06 '11 at 12:58
And this is what happened http://img232.imageshack.us/f/screenshotylj.png/ So, jQuery works fine because of that create iframe and appnd it to body. But Body of iframe still without content – krasilich Jan 06 '11 at 13:09
You are not explicitly creating the HTML tags inside of the iframe. So maybe firebug is giving the illusion of tags, whereas jQuery does not see them. Try creating the tags inside of the iframe when you create (modifying line one of my answer). – Marcus Whybrow Jan 06 '11 at 13:17
but jQuery('#someId').contents().find('body') return an element – krasilich Jan 06 '11 at 13:30
OK, then I have no more ideas. It is either another hidden problem, or I may have got something wrong. If I were you I would create a simplified test case and see what happens there. – Marcus Whybrow Jan 06 '11 at 13:32

score 2 · Answer 3 · answered Dec 08 '12 at 20:42

Has passed time of this question, but here is another solution:

var ifrm = document.createElement("iframe");
document.body.appendChild(ifrm);
ifrm.id = "someId"; // optional id
ifrm.onload = function() {
    // optional onload behaviour
}
setTimeout(function() {
    $(ifrm).contents().find("body").html(content);
}, 1);

jQuery add iFrame with content

3 Answers3

Linked