Javascript iframe без src с вложенными скриптами
Можно ли создать iframe со скриптами в его элементе head, до того, как iframe будет вставлен в dom и будут ли сценарии onload="alert(1)"
срабатывать, когда они будут готовы?
Пример 1, используя вложенные скрипты:
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);
Пример два, намного больше:
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)
Ни один из этих способов не вызовет функции onload 'alert
;
Возможно ли это? Сценарии загружаются в обоих случаях, поскольку их объекты окна установлены, но нет обратного вызова.
Ответы
Ответ 1
Попробуйте следующее:
<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>