Javascript iframe without src with nested scripts

Question

Is it possible to create an iframe with scripts in its head element, before the iframe being inserted into the dom and have the scripts onload="alert(1)" fire when they are ready?

Example 1, using nested scripts:

var iframe  = jQuery("<iframe></iframe>");
var scripts =  '' +
            '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"          onload="alert(1);"><\/script>' +
            '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js" onload="alert(2);"><\/script>';

iframe.html(scripts);

jQuery("body").append(iframe);

Example two, much bigger:

function loadScript(path, callback, appendTo) {
        var element = document.createElement('script');
        element.setAttribute ("type", 'text/javascript');
        element.setAttribute ("src", path);

        return loadElement(element, callback, appendTo);
}

function loadElement(element, callback, appendTo) {
        element.loaded = false;

        if (element.readyState){  // IE
                element.onreadystatechange = function(){
                        if (element.readyState == "loaded" || element.readyState == "complete"){
                                element.onreadystatechange = null;

                                loadElementOnLoad(element, callback);
                        }
                };
        } else {                 // Others
                element.onload = function() {
                        loadElementOnLoad(element, callback);
                };
        }

        (appendTo).appendChild(element);

        return element;
}

function loadElementOnLoad(element, callback) {
        if (element.loaded != true) {
                element.loaded = true;
                if ( callback ) callback(element);
        }
}


function loadScriptNew1(src, callback, appendTo) {
        loadScript(src, callback, appendTo)
}

var iframe  = jQuery("<iframe></iframe>");

loadScriptNew1("http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js", function() {
        alert(11)
}, iframe.get(0) )


loadScriptNew1("http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js", function() {
        alert(22)
}, iframe.get(0) )

jQuery("body").append(iframe)

None of these ways will trigger the onload functions' alert;

Is this possible? The scripts gets loaded in both cases, as their window objects are set, but no callback.

bearfriend · Accepted Answer · 2013-08-01 01:51:07Z

Try this:

<html>
<head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">
  function insertIframe() {
  var iframe = $('<iframe></iframe>').appendTo('body')[0];

  // switch to straight JS
  var script = iframe.contentWindow.document.createElement("script");
  script.type = "text/javascript";
  script.src = "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
  script.onload = function() { alert(1); };
  iframe.contentWindow.document.body.appendChild(script);

}

</script>
</head>
<body onload="insertIframe()">
</body>

Collectives™ on Stack Overflow

Javascript iframe without src with nested scripts

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related