Пример ограничен. Я упомянул в вопросе, что мне нужно загрузить пользовательский элемент / тег HTML. Документ не будет готов, потому что скрипт не будет доступен для определения тега.

ель состоит в том, чтобы загрузить JavaScript в<head> только если определенный элемент существует в<body>.

Однако у меня есть проблема: я загружаю веб-компонент, который просто<script> размещен в другом месте и используется как:

<script src="https://someurl.com/some-web-component.min.js"></script>

Этот файл веб-компонента огромен, поэтому я не хочу его извлекатьесли это вставлено в тело нашей Системой управления контентом (CMS).

Ограничения, под которыми я работаю:

<head> разделяется между страницами, поэтому мне нужна условная логика

• Я не имею никакого контроля над<body> вставленный CMS, который потенциально может содержать<my-web-component> тег

• Мне нужен скрипт для загрузки веб-компонента, поэтому я не могу использовать $ (документ) jQuery. Уже, по крайней мере, думаю, что не могу - будет выдана ошибка, потому что браузер не будет знать, существует ли элемент

Этот плункер частично показывает мою проблему, за исключением всей сложности веб-компонента:

https://plnkr.co/edit/GGif2RNHX1iLAvSk1nUw?utm_source=next&utm_medium=banner&utm_campaign=next&p=preview

Есть ли способ обойти это?

 Munim Munna23 апр. 2018 г., 23:25
Что делает этот скрипт? От этого зависит какой-либо другой сценарий или от чего-либо? Это библиотека? Любой встроенный скрипт в теле использует его?
 VSO24 апр. 2018 г., 02:49
Сценарий определяет пользовательский элемент, который представляет собой html / javascript, который извлекает библиотеку form.io и данные из API, а затем отображает их для пользователя.

Ответы на вопрос(1)

Решение Вопроса

DOMContentLoaded мероприятие.

Событие DOMContentLoaded наступает, когда исходный HTML-документ полностью загружен и проанализирован, не дожидаясь окончания загрузки таблиц стилей, изображений и подкадров.

В этом случае вы можете найти Компонент и добавить скрипт с чем-то вроде следующего

document.addEventListener("DOMContentLoaded", function(event) {
  if(document.querySelector('Component')){
    var script = document.createElement('script');
    script.src = 'https://someurl.com/some-web-component.min.js';
    document.head.appendChild(script)
  }
});

Вероятно, лучшим подходом было бы добавитьscript в голове сasync атрибут, а затем удалите его, если компонент не найден. Что-то вроде этого

<script async src = "https://someurl.com/some-web-component.min.js"> </script> 
<script >
  document.addEventListener("DOMContentLoaded", function(event) {
    if (document.querySelector('Component') == null) {
      var script = document.querySelector('script[src="https://someurl.com/some-web-component.min.js"]')
      document.head.removeChild(script)
    }
  }); 
</script>

Больше оСобытия жизненного цикла DOM
Больше озагрузка асинхронного скрипта

Ваш ответ на вопрос