Как загрузить ресурс JavaScript условно на основании наличия определенного тега ID в файле HTML страницы? - PullRequest
Новая
       0

Как загрузить ресурс JavaScript условно на основании наличия определенного тега ID в файле HTML страницы?

0 голосов
/ 21 января 2020

Ситуация

В поддерживаемом мною веб-приложении указывается изменение, при котором определенный скрипт JavaScript должен загружаться условно, в зависимости от наличия или отсутствия определенного идентификатора элемента на странице.

Вопрос

Как лучше всего достичь этого результата без использования внешних библиотек и в соответствии с принятой практикой?

Идея современного подхода

В настоящее время я думаю сделать что-то вроде следующего; Я был бы признателен за некоторые рекомендации, в том числе в отношении: является ли этот подход целесообразным и / или более эффективными альтернативными методами. 

// identify head of html 
const htmlHead = document.querySelector('head');

// identify desired change condition and assign 
const desiredIdPresent = document.querySelector('#foo');

// assign script creation      
const activeScript = document.createElement('script');
      activeScript.type = 'text/javascript';


// conditions determine which script loads
if (desiredIdPresent){
    activeScript.src =  '/foo.js';
} else {
    activeScript.src = '/bar.js';
};

// insert desired script into document head
htmlHead.appendChild(activeScript);

есть несколько схожих ситуаций и решений в следующем, которые я, помимо прочего, также использовал для справки:

условно загрузить javascript ресурс

Условно загрузить JavaScript файл

1 Ответ

1 голос
/ 21 января 2020

Проблема связана с синхронным аспектом загрузки страницы. Кажется, ваш код пытается найти #foo перед загрузкой.

Решение: поместите тег сценария в конец вашего тела. Пример: 

<body>
    <div id="foo"></div>

    <script>
        // identify head of html 
const htmlHead = document.querySelector('head');

// identify desired change condition and assign 
const desiredIdPresent = document.querySelector('#foo');
console.log(desiredIdPresent);

// assign script creation      
const activeScript = document.createElement('script');
      activeScript.type = 'text/javascript';


// conditions determine which script loads
if (desiredIdPresent){
    activeScript.src =  '/foo.js';
} else {
    activeScript.src = '/bar.js';
};

// insert desired script into document head
htmlHead.appendChild(activeScript);
    </script>
    <!-- OR --> <script src="k.js"/>
</body>

Я не коснулся ни одного сантиметра вашего JS.

...