Javascript - Функция VS Нет функции ... как это работает?

Question

Если я помещаю следующий скрипт выше элемента, который ищет скрипт, я получаю сообщение об ошибке:

<script type="text/javascript">
document.getElementById('my_iframe').src = "my_file.php";
</script>

И, конечно, чтобы он снова заработал, мне нужно поместить его ниже элемента.

И все же, если я превращу ту же самую вещь в функцию и поместу ее над элементом, который ищет скрипт, он отлично работает:

function loadnew(){
    document.getElementById('my_iframe').src = "my_file.php";
}

Вопрос в том, почему это работает, если я использую функцию? Я всегда думал, что для того, чтобы скрипт нашел что-то, его нужно поместить ниже элемента, который он ищет?

Спасибо!

Answer 1

Где он размещен, не имеет значения, единственное, что имеет значение, это когда он выполняется.

Если он выполняется до того, как есть элемент с идентификатором my_iframe, он потерпит неудачу, если он естьпреуспеет.

Так что, если вы просто сделаете встроенный тег сценария и затем поместите туда один вкладыш, он будет выполнен немедленно, а если тег сценария окажется перед тегом с идентификатором my_iframe, то ничего не будет найдено - getElementById возвращает null, который не является обычным объектом и, следовательно, не может иметь свойства src, поэтому ваш код завершается ошибкой.

Если вы определяете функцию и выполняете ее после элемента с идентификатором my_iframe существует, он вернет объект элемента, и ваш код работает нормально (конечно, если предположить, что объект элемента позволяет установить свойство src).

Answer 2

Вам нужно выполнить этот код, когда DOM будет готов.

window.onload=function(){
  loadnew()
}

Answer 3

В вашем первом примере код выполняется перед сборкой дерева DOM.my_iframe еще не существуетЕсли вы поместите его ниже элемента, дерево DOM будет построено, а ваш элемент существует.Создавая функцию (и вызывая ее позже), вы откладываете выполнение кода до тех пор, пока не будет построено дерево DOM.

Answer 4

Звучит так, будто вы помещаете скрипт в тело.Если вы поместите его в тело, вы отдадите все свои силы поставщику браузера.

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

Объяснение :

Другими словами, если ваш глобально ограниченный код не переноситсяв функции помещается над элементом DOM, который еще не отображался, тогда этот код вызовет ошибку, так как рассматриваемый объект не определен.

Когда код находится ниже элемента,браузер, как правило, успевает визуализировать элемент DOM до запуска кода.

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

Предположим, вы вносите коррективы в HTMLи перемещать элементы на странице.Представьте себе весь JavaScript, который вам нужно было бы перетасовать.

Решение:

Чтобы это не стало проблемой, поместите свой сценарий в нужное место ввнешний файл JavaScript, связанный в разделе заголовка в виде тега скрипта.Сценарий не будет работать до тех пор, пока DOM не будет полностью загружен, что предотвратит ошибки, связанные с элементами, которые еще не находятся в области действия, и не устранит детали беспокойства о порядке загрузки файлов.

Answer 5

Javascript код выполняется в том виде, в котором встречается анализатор браузера ¹ . Это означает, что если вы запросите элемент ниже вашего тега <SCRIPT>, он не найдет его, потому что элемент под ним еще не был выполнен создан.

Однако, поскольку вы помещаете свой код в функцию, то выполняется ее создание, а не код внутри нее. Поэтому он будет работать для вашего предоставленного случая (поскольку вы не вызываете эту функцию).

Если вам нужны дополнительные разъяснения, я могу предоставить более подробную информацию и примеры.

---

[1] Обратите внимание, что некоторые браузеры могут выполнять Javascript в отдельном потоке, чем HTML-рендеринг, однако он все еще выполняется так, как встречается.