Как расположение тега script на странице влияет на определенную в нем функцию JavaScript? - PullRequest
Новая
       15

Как расположение тега script на странице влияет на определенную в нем функцию JavaScript?

42 голосов
/ 30 января 2009

Я прочитал, что вы должны определить свои функции JavaScript в теге <head>, но как расположение <script> (будь то <head>, <body> или любой другой тег) влияет на функцию JavaScript ,

В частности, как это влияет на область действия функции и откуда ее можно вызвать?

Ответы [ 9 ]

25 голосов
/ 03 февраля 2009

Говорить людям добавлять <SCRIPT> только в голову звучит как разумный поступок, но, как говорили другие, есть много причин, почему это не рекомендуется или даже не практично - в основном скорость и способ динамического создания HTML-страниц.

Это то, что спецификация HTML 4 говорит :

Элемент SCRIPT размещает скрипт в документе. Этот элемент может появляться в заголовке любое количество раз или ТЕЛО HTML-документа.

И пример HTML. Разве это не выглядит довольно отформатированным здесь:) 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>A document with SCRIPT</TITLE>
<META http-equiv="Content-Script-Type" content="text/tcl">
<SCRIPT type="text/vbscript" src="http://someplace.com/progs/vbcalc">
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
...some JavaScript...
</SCRIPT>
</BODY>
</HTML>

И что-то, что можно ожидать в HTML 5 :

Новый асинхронный атрибут в <SCRIPT>:

Примечание: есть сценарий [sic], который может быть выполняется:

Атрибут async имеет значение «true»: сценарий будет выполнен асинхронно с остальной частью страницы, поэтому скрипт будет выполнен пока страница продолжает разбор.

Атрибут async имеет значение «false», но атрибут defer имеет значение «true»: скрипт будет выполнен, когда страница закончил с разбором.

19 голосов
/ 30 января 2009

нормальные правила игры все еще стоят; не используйте вещи, пока они не определены. :)

Кроме того, обратите внимание, что рекомендация «все ставить снизу» не единственное правило в книге - в некоторых случаях оно может быть неосуществимым, а в других случаях может иметь больше смысла поставить сценарий в другом месте.

Основная причина размещения скрипта внизу документа - это производительность, скрипты, в отличие от других HTTP-запросов, не загружаются параллельно, то есть они замедляют загрузку остальной части вашей страницы. Другая причина размещения сценариев в нижней части заключается в том, что вам не нужно использовать какие-либо функции 'DOM ready'. Поскольку тег script находится ниже всех элементов, DOM будет готов для манипуляций!

РЕДАКТИРОВАТЬ: Читать это: http://developer.yahoo.com/performance/rules.html#js_bottom

9 голосов
/ 30 января 2009

Одним из аспектов размещения является производительность. См. эту прекрасную статью в обсуждении YSlow , почему иногда рекомендуется размещать их внизу документа.

Что касается вопросов области действия, насколько я знаю, обычные правила видимости для Javascript (переменные, определенные внутри или вне функций, локальные, глобальные, замыкания и т. Д.) Не затрагиваются

4 голосов
/ 11 мая 2014

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

<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unit Teachers</title>
<head>
 <script type="text/javascript" src="getTeachers.js"></script>
 <script type="text/javascript">
document.getElementById("buttonId").onclick=function(){getResults()};

</script>
 </head>
 <body>
 <form>
 <input type = "button" id="buttonId" value = "Press for Results"  /><br />
 </form>

<span id="results" /></span>
</body>
</html>

Выдает ошибку перед первой загрузкой head и не может найти элемент с указанным идентификатором. Ниже приведен код исправления: 

<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unit Teachers</title>
<head>
 <script type="text/javascript" src="getTeachers.js"></script>

 </head>
 <body>
 <form>
 <input type = "button" id="buttonId" value = "Press for Results"  /><br />
 </form>
<script type="text/javascript">
document.getElementById("buttonId").onclick=function(){getResults()};

</script>
<span id="results" /></span>
</body>
</html>
2 голосов
/ 29 апреля 2011

Если вы извлекаете Javascripts через XMLHttpRequest, как сказал Диодей, это, вероятно, не будет работать. В моем случае ошибки не было, браузер просто игнорирует новые сценарии.

Я закончил тем, что использовал это, не очень изящно, но пока у меня работает:

http://zeta -puppis.com / 2006/03/07 / JavaScript-сценариев выполнения в-innerhtml-The-месть /

Как использовать execJS: http://zeta -puppis.com / 2006/02/23 / javascript-script-execute-in-innerhtml /

Примечание: следите за &lt; в этой строке: for(var i=0;i<st.length; i++)

2 голосов
/ 30 января 2009

Если ваш сценарий ссылается на идентификатор на странице, и страница не была обработана (т. Е. Сценарий до HTML, или ваш сценарий выполняется с помощью onload, а не DOM готов), вы также можете получить ошибку.

2 голосов
/ 30 января 2009

Это не так. Большинство фреймворков программирования разбросаны по всей странице. Из-за этого я редко видел проблемы (и только из старых браузеров).

1 голос
/ 30 января 2009

Правила определения содержания Javascript аналогичны perl - вы можете вызывать любую функцию на текущем или любом более высоком уровне области видимости. Единственное ограничение заключается в том, что функция должна быть определена во время ее вызова. Позиция в источнике не имеет значения - имеет значение только позиция во времени.

Вам следует избегать помещения скриптов в <head>, если это возможно, поскольку это замедляет отображение страницы (см. Ссылку, размещенную Аланом).

1 голос
/ 30 января 2009

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...