лучший способ ненавязчивой загрузки в простом JavaScript

Question

каков лучший ненавязчивый способ вызова чего-либо после загрузки страницы в обычном javascript? конечно в jquery я бы использовал

$(document).ready(function(){...});

но я не уверен в самом надежном подходе в простой js.

ясно

window.onload = ...

не является правильным решением, поскольку оно перезапишет предыдущее объявление.

что я пытаюсь сделать, это вставить iframe в div после загрузки страницы, но, возможно, на самом деле есть лучшие способы сделать это. Мой план - сделать что-то вроде

window.onload = function(divId){
 var div = document.getElementById(divId);
 div.innerHTML = "<iframe src='someUrl' .. >";
}

EDIT: Приносим свои извинения за не включая все необходимые детали. Скрипт не для моего сайта - идея в том, чтобы показать часть моего сайта (форму) на внешних веб-сайтах. Приоритет - минимизировать усилия, которые кто-то должен приложить, чтобы использовать мой код. Вот почему я хотел бы сохранить все в файле js и абсолютно ничего в <script> - кроме <script src="http://my.website/code.js" />. Если я изменю URL-адрес iframe или хотел бы добавить некоторые функции, я бы хотел обновить код на всех других веб-сайтах, не прося их вносить какие-либо изменения.
Мой подход может быть неправильным - любые предложения приветствуются.

Answer 1

//For modern browsers:
document.addEventListener( "DOMContentLoaded", someFunction, false );

//For IE:
document.attachEvent( "onreadystatechange", someFunction);

`attachEvent` and `addEventListener` allow you to register more than one event listener for a particular target.

См: https://developer.mozilla.org/en/DOM/element.addEventListener

Также стоит посмотреть, как это делает jQuery: http://code.jquery.com/jquery-1.7.js Поиск bindReady.

Answer 2

Используйте window.addEventListener и события load или DOMContentLoaded:

window.addEventListener('DOMContentLoaded',function(){alert("first handler");});
window.addEventListener('DOMContentLoaded',function(){alert("second handler");});

object.addEventListener('event',callback) вставит прослушиватель событий в очередь для данного конкретного события объекта. См. https://developer.mozilla.org/en/DOM/element.addEventListener для получения дополнительной информации.

Для IE5-8 используйте window.attachEvent('event',callback), см. http://msdn.microsoft.com/en-us/library/ms536343%28VS.85%29.aspx. Вы можете создать себе небольшую вспомогательную функцию:

function addEventHandler(object,szEvent,cbCallback){
    if(typeof(szEvent) !== 'string' || typeof(cbCallback) !== 'function')
        return false;
    if(!!object.addEventListener){ // for IE9+
        return object.addEventListener(szEvent,cbCallback);
    }
    if(!!object.attachEvent){ // for IE <=8
        return object.attachEvent(szEvent,cbCallback);
    }
    return false;
}
addEventHandler(window,'load',function(){alert("first handler");});
addEventHandler(window,'load',function(){alert("second handler");});

Обратите внимание, что DOMContentLoaded не определено в IE меньшем 9. Если вы не знаете браузер получателя, используйте событие load.

Answer 3

Просто поместите ваш скрипт include в самом конце документа, непосредственно перед или после конечного тега </body>, например:

(content)
(content)
<script src="http://my.website/code.js"></script>
</body>
</html>

Вся разметка над скриптом будет доступна черезобычные методы DOM ( ссылка ).Очевидно, что не все вспомогательные ресурсы (изображения и тому подобное) будут полностью загружены, но, вероятно, именно поэтому вы хотите избежать события window load (это происходит так поздно).

Единственная реальная цельсобытий ready в стиле, если вы не контролируете, куда включается скрипт (например, библиотеки), или вам нужно что-то выполнить до до загрузки страницы и что-тоиначе после загрузки страницы, и вы хотите избежать двух HTTP-запросов (например, для двух разных сценариев, один до загрузки и один после).