Как добавить внешний js-файл с параметром

Question

Я хочу дать минимальный js-код для случайных веб-сайтов, чтобы они могли добавить виджет.

Код должен запускаться после загрузки главной страницы и включать параметр с именем домена. (Я не хочу это жестко кодировать)

Один из вариантов - добавить этот код непосредственно перед </body> (чтобы он запускался после загрузки страницы):

<script type="text/javascript" id="widget_script">  
    document.getElementById('widget_script').src=location.protocol.toLowerCase()+"//mywebsite.com/?u="+encodeURIComponent(window.location.host);        
</script>

Это работает в IE, но не в Firefox. В Firebug я вижу, что свойство src создано правильно, но скрипт с моего сайта не загружен.

Мой вопрос: каков наилучший способ сделать это? (желательно, помещая минимальные строки в часть заголовка.)

Для дальнейшего уточнения вопроса: если я помещаю скрипт в часть заголовка, как мне запустить его после загрузки и загрузки главной страницы? Если я использую событие onload в своем сценарии, я могу пропустить его, поскольку оно может загружаться после того, как событие onload было запущено.

Answer 1

Вы можете попытаться статически включить скрипт в document.write (это более старая техника, которую не рекомендуется использовать, поскольку она может вызвать проблемы с более современными библиотеками):

var url = location.protocol.toLowerCase() + 
    "//mywebsite.com/?u="+encodeURIComponent(window.location.host);
document.write('<script src="', url, '" type="text/javascript"><\/script>');

Или с динамически созданным элементом DOM:

var dynamicInclude = document.createElement("script");
dynamicInclude.src = url;
dynamicInclude.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(dynamicInclude); 

Позднее редактировать:

Чтобы убедиться, что скрипт запускается после загрузки, его можно использовать:

var oldWindowOnload = window.onload; 
window.onload = function() {
    oldWindowOnload(); 
    var url = location.protocol.toLowerCase() + 
        "//mywebsite.com/?u="+encodeURIComponent(window.location.host);
    var dynamicInclude = document.createElement("script");
    dynamicInclude.src = url;
    dynamicInclude.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(dynamicInclude); 
}

Я не верю, что это может быть короче, кроме коротких имен переменных:)

Answer 2

Почему бы не использовать метод jQuery getScript для загрузки? Если вы не хотите зависеть от jQuery, вы можете проследить через источник , чтобы узнать, как они его взяли.

Просмотр широко используемой библиотеки всегда покажет вам решения проблем, о которых вы не знали. Например, вы можете увидеть, как jQuery генерирует обратный вызов при загрузке скрипта, и как избежать предполагаемой утечки памяти в IE.

Answer 3

Возможно, вы хотите реализовать технику неблокирующего скрипта . По сути, вместо изменения сценария сценария вы собираетесь создать и добавить совершенно новый элемент сценария.

Хорошо, напишите здесь и есть стандартные способы сделать это в YUI и jQuery. Это довольно просто, только с одной ошибкой, которая хорошо понята (и задокументирована по этой ссылке).

Ох, и это:

Один из вариантов - добавить этот код просто до </body> (так будет работать после загрузки страницы):

... технически это не так: вы просто делаете свой скрипт последним в порядке загрузки.