Форум

Маэстро · #1 (**permalink**) 23.01.2015, 20:03

Обнаружил, что javascript не работает, если он прописан внутри тега DIV, который не находится в DOM. И это хорошо!
Вот только не могу найти информацию, это правильно/неправильно и задокументировано ли где-то? Хочу построить на этом систему, но не уверен, что это так и останется.

<html>
<body>
<div id ='content'>qwerty

<script>
alert(123); // здесь этот скрипт сработает
</script>
  
</div>
  
</body>
</html>

<html>
<body>
<div id ='content'>qwerty

<script>
var o=document.getElementById('content');    
o.parentNode.removeChild(o); // удаляем сами себя из DOM прямо в процессе загрузки страницы
</script>  
  
<script>
alert(123); // а здесь этот скрипт не сработает! это правильно?
</script>
  
</div>
  
</body>
</html>

P.S. данный фокус не проходит в IE8.

ruslan_mart · #2 (**permalink**) 23.01.2015, 20:12

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

SV0L0CH · #3 (**permalink**) 23.01.2015, 20:19

Могу предложить заодно проверить что будет если один и тот же <script/> многократно вставлять в DOM.
Ато мне лень, но интересно

Маэстро · #4 (**permalink**) 23.01.2015, 20:25

Сообщение от Ruslan_xDD

... а после удаления и вовсе перестаёт существовать.

-Неверно. Скрипт жив и существует. Попробуйте по факту загрузки документа вернуть его обратно в BODY и он даже сразу выполнится!

<html>
<body>
<div id ='content'>qwerty

<script>
window.onload = function()  
{
alert('загрузили страницу, теперь страшный скрипт сработает')
document.body.appendChild(o);
};
  
var o=document.getElementById('content');    
o.parentNode.removeChild(o); // удаляем сами себя из DOM прямо в процессе загрузки страницы
</script>  
  
<script>
alert(123); // а здесь этот страшный скрипт не сработает! это правильно?
</script>
  
</div>
  
</body>
</html>

Маэстро · #5 (**permalink**) 23.01.2015, 20:45

Не менее удивительно то, что при наличии внутри DIV_а трех скриптов первые два сработают до удаления DIV со страницы, а после последующей вставки обратно сработает только третий скрипт, но не сработают первые два!

<html>
<body>

<script>
window.onload = function()  
{
alert('загрузили страницу и вставляем DIV со скриптами обратно в BODY; после этого сработает только скрипт №3')
document.body.appendChild(o);
};
</script>
  
 
<div id ='content'>qwerty  
 
<script>
alert('скрипт 1'); // скрипт №1 сработает до удаления DIV из BODY, но не сработает после вставки DIV обратно в BODY
</script>  
  
<script>
alert('скрипт 2'); // скрипт №2 сработает до удаления DIV из BODY, но не сработает после вставки DIV обратно в BODY  
var o=document.getElementById('content');    
o.parentNode.removeChild(o); // удаляем сами себя из DOM прямо в процессе загрузки страницы
</script>  
  
<script>
alert('скрипт 3'); // скрипт №3 не сработает после удаления DIV из BODY, но сработает после вставки DIV обратно в BODY
</script>
  
</div>
  
</body>
</html>

SV0L0CH · #6 (**permalink**) 23.01.2015, 21:59

Маэстро,
Пометь свои примеры [HTML run] чтобы было удобно смотреть. Может кто отпишется о отличиях между различными браузерами.

danik.js · #7 (**permalink**) 23.01.2015, 21:59

Все это описано в спецификации: https://html.spec.whatwg.org/multipa...script-element

Если вкратце, то у элементов <script> есть внутренние флаги, отражающие состояние - parser-inserted, already-started и т.д.

danik.js · #8 (**permalink**) 23.01.2015, 22:01

Сообщение от SV0L0CH

Может кто отпишется о отличиях между различными браузерами

Все современные браузеры имеют HTML5-парсеры и следуют спецификации. Процесс парсинга там очень подробно расписан.

Маэстро · #9 (**permalink**) 23.01.2015, 22:06

Сообщение от SV0L0CH

Маэстро,
Пометь свои примеры [HTML run] чтобы было удобно смотреть. Может кто отпишется о отличиях между различными браузерами.

-пометил
-я проверяю в IE10 и последних версиях Google Chrome, FireFox, Opera - результат одинаков.

Маэстро · #10 (**permalink**) 23.01.2015, 22:08

Сообщение от danik.js

Все это описано в спецификации: https://html.spec.whatwg.org/multipa...script-element
Если вкратце, то у элементов <script> есть внутренние флаги, отражающие состояние - parser-inserted, already-started и т.д.

Спасибо, а Вы можете сказать (своё мнение) так описанное мною поведение правильно или нет?

Форум

Справочник

Discord чат

Курсы javascript