how can i load [removed]'s into an iframe?

Question

I've got the logic working to append into my iframe from the parent

this works:

$('#iframe').load(function() {
  $(this).contents().find('#target').append('this text has been inserted into the iframe by jquery');    
});

this doesn't

$('#iframe').load(function() {
  $(this).contents().find('body').append('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>');    
});

.lf

The problem is something to do with the inserted script tags not being escaped properly. Half of the javascript is becomes visible in the html, like the first script tag has been abruptly ended.

Answer 1

I'm a bit surprised that isn't working [Edit: No longer surprised at all, see mtrovo's answer.]...but here's what I do, which is mostly non-jQuery per your comment below but still quite brief:

var rawframe = document.getElementById('theframe');
var framedoc = rawframe.contentDocument;
if (!framedoc && rawframe.contentWindow) {
    framedoc = rawframe.contentWindow.document;
}
var script = doc.createElement('script');
script.type = "text/javascript";
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";
framedoc.body.appendChild(script);

Off-topic: I really wouldn't give an iframe (or anything else) the ID "iframe". That just feels like it's asking for trouble (IE has namespace issues, and while I'm not aware of it confusing tag names and IDs, I wouldn't be completely shocked). I've used "theframe" above instead.

Answer 2

Maybe the error is with your string, never create a string in javascript with a literal < /script> in it.

$('#iframe').load(function() {
  $(this).contents().find('body').append('<scr' + 'ipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></scr' + 'ipt>');    
});

Answer 3

Warning: loading script in this manner would make scripts running in main window context i.e.: if you use window from somescript.js, it would be NOT iframe's window!

$('#iframe').load(function() {
    $(this).contents().find('body').append('<scr' + 'ipt type="text/javascript" src="somescript.js"></scr' + 'ipt>');    
});

To be able to use iframe context inject script with this:

function insertScript(doc, target, src, callback) {
    var s = doc.createElement("script");
    s.type = "text/javascript";
    if(callback) {
        if (s.readyState){  //IE
            s.onreadystatechange = function(){
                if (s.readyState == "loaded" ||
                    s.readyState == "complete"){
                    s.onreadystatechange = null;
                    callback();
                }
            };
        } else {  //Others
            s.onload = function(){
                callback();
            };
        }
    }
    s.src = src;
    target.appendChild(s);        
}

var elFrame = document.getElementById('#iframe');
$(elFrame).load(function(){
    var context = this.contentDocument;
    var frameHead = context.getElementsByTagName('head').item(0);
    insertScript(context, frameHead, '/js/somescript.js');
}