Добавление сценариев к заголовку с использованием JavaScript - странное поведение - PullRequest
Новая
       17

Добавление сценариев к заголовку с использованием JavaScript - странное поведение

0 голосов
/ 22 июля 2011

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

Теперь иногда рекламный код будет включать теги javascript, и я подумал, что это всего лишь вопрос перемещения их в раздел заголовка, и они будут работать. Теоретически это работает нормально, но когда я создал скрипт для перемещения тегов скрипта в голову, я столкнулся с каким-то странным поведением.

Итак, я написал этот код, чтобы протестировать только движущуюся часть скрипта, исключив остальную часть кода как источник ошибки.

Я получаю те же результаты, если у меня есть только два сценария в div, он перемещает один из них, если у меня 3 сценария, он перемещает 2 из них. В приведенном ниже коде он перемещает сценарии 1 и 3, пропуская удаленную ссылку на JavaScript и последний тег сценария.

Было бы интересно хотя бы узнать, почему это происходит, и если это можно решить.

Редактировать: Чтобы прояснить одну вещь, если я сначала поставлю удаленный скрипт jquery, а затем один из простых тегов скрипта, он переместит удаленный тег скрипта в заголовок и пропустит второй тег скрипта. 

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// get div id
function test() {
var td = document.getElementById('testId');
var scripts = td.getElementsByTagName("script");
console.log("No. of scripts to transfer to head: "+scripts.length);
for(i=0;i<scripts.length;i++) {
    var curScript = scripts[i];
    document.head.appendChild(curScript);
}   
}
</script>
</head>
<body onload="test();">
<div id="testId">
    <script type="text/javascript">var firstScript = 1;</script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">var secondScript = 1;</script>
    <script type="text/javascript">var thirdScript = 1;</script>
</div>
</body>
</html>

1 Ответ

1 голос
/ 22 июля 2011

Вы работаете под ложным предположением: не имеет значения, находятся ли элементы script в head или body, они запускаются независимо.Перемещение их после того, как они были добавлены в DOM, в лучшем случае бессмысленно, а в худшем случае может вызвать нежелательные побочные эффекты, если скрипт будет перезапущен при перемещении (но я не думаю, что это так).

Что касается того, почему вы видите поведение, которое вы видите, это потому, что getElementsByTagName возвращает live NodeList.Когда вы перемещаете скрипт, он удаляется из NodeList.Итак, учитывая ваши четыре сценария, вы получите NodeList, изначально содержащий четыре элемента, поэтому .length - это 4, а [0] - ваш первый сценарий.Когда вы перемещаете этот скрипт из div, NodeList обновляется, потому что скрипт больше не находится в div, поэтому его длина теперь равна 3, а [0] относится к вашему второму скрипту (тот,loading jQuery).

Вы можете избежать прерывания цикла двумя способами:

  1. Цикл назад, от .length - 1 до 0 включительно или

  2. Превратите NodeList в массив, чтобы элементы не вышли из-под вас.

...