Выполнение JS внутри div с display:none
Не смог найти информацию, но хочется освежить в памяти следующий момент.
Имеем какую-то HTML структуру. JS в виде интеграции с внешним сервисом.
<html>
...
<div style="display:none">
<script src="..."></script>
</div>
...
</html>
Верно ли утверждение, что браузер по мере загрузки DOM будет выполнять все встречаемые элементы <scrip></script>? Если да - тогда в чем отличие display:none от visible:hide?
Основная суть вопроса: как отложить загрузку <script> до выполнения условия (например наличие класса в body /или/ проверка значения в localStorage)?
document.addEventListener('DOMContentLoaded') и $(document).ready() не в счет. Так как логика завязана на внешний скрипт
Ответы (1 шт):
Верно ли утверждение, что браузер по мере загрузки DOM будет выполнять все встречаемые элементы ?
Не проверял, но предположу, что да, верно. Впрочем, вы можете проверить это сами. Я свое предположение обосновываю следующей частью ответа.
Если да - тогда в чем отличие display:none от visible:hide
display:none убирает элемент из базового потока. При этом в DOM-дереве элемент все равно остается. visibility: hidden в прямом смысле делает элемент невидимым. Сравните:
Ничего не трогал:
display: none
visibility: hidden
Основная суть вопроса: как отложить загрузку до выполнения условия (например наличие класса в body /или/ проверка значения в localStorage)?
Обычно, конечно, так не делается в современном фронтенде. Подобные вещи - асинхронная загрузка скрипта on-demand - выполняются на уровне бандлера: code-splitting, tree-shaking и т.п. вещи.
Если же вы твердо уверены, что вам нужно именно то, что вы написали, то смотрите в сторону динамического добавления элемента script на страницу. Раньше иногда действительно именно так и делали. Встраивали в рантайме элемент script с каким-то содержимым на страницу, и только после этого сам скрипт начинал исполняться.