Поиск по этому блогу

четверг, 1 сентября 2011 г.

Получить DOM обьект выполняемого тега скрипт.

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

А теперь к делу. Просто вызванная функция в скрипте имеет контекст window. Доказательство тому пример :

<script type="javascript">
function me(){
    alert(this);
}
me();
//Или как в следуйщей строке
//(function(){alert(this);})();
</script>

А теперь давайте достанем тег скрипт в котором она выполняется:
<script type="text/javascript" id="myScritp">
 function myScriptId(){
  //Получаем масив тегов скрипт определенных на странице в данный момент
  var existingScripts = document.getElementsByTagName('script'); 
  // Получаем тег скрипт в котором выполняемся
  var myScriptTag = existingScripts[existingScripts.length - 1]; 
  alert(myScriptTag.id);
 }
 myScriptId();
</script>

Как это работает : document.getElementsByTagName('script') вернет нам масив объектов script по порядку их попадания в DOM. А поскольку инлайн скрипт выполняется во время построения DOM, то на момент вызова в нем будут скрипты по порядку их вставки в HTML до текущего и включая его как последний элемент массива.
На первый взгляд статью можно и закончить, но хочется упомянуть один нюанс - IE.
Как вы думаете какой вывод будет у следующего примера?
<div id="myDiv">
<script type="text/javascript" id="myScritp">
 function myScriptId(){
  var existingScripts = document.getElementsByTagName('script'); //Получаем масив тегов скрипт определенных на странице в данный момент
  var myScriptTag = existingScripts[existingScripts.length - 1]; // Получаем тег скрипт в котором выполняемся
  alert(myScriptTag.parentNode.id); 
 }
 myScriptId();
</script>
<div>

myDiv ?? Уверены ?? А в IE ?? Для того что бы в IE все заработало надо лишь перед тегом вставить хотя бы &nbsp;
<div id="myDiv">
&nbsp;
<script type="text/javascript" id="myScritp">
 function myScriptId(){
  var existingScripts = document.getElementsByTagName('script'); //Получаем масив тегов скрипт определенных на странице в данный момент
  var myScriptTag = existingScripts[existingScripts.length - 1]; // Получаем тег скрипт в котором выполняемся
  alert(myScriptTag.parentNode.id); 
 }
 myScriptId();
</script>
<div>

2 комментария:

  1. Кажется, не работает в FF :( Находит всегда последний скрипт

    ОтветитьУдалить
  2. А Вы запускаете скрипт до иди после загрузки DOM'а ?

    ОтветитьУдалить