Как добавить JS в After Header?

Поддержка
1

Привет!

Я хочу добавить скрипт в секцию «После заголовка» (After Header) в компоненте моей темы, но это не работает.

Код:

<button type="button" class="btn btn-outline btn-small" id="Send">Send</button>

<script>
var btn = document.querySelector('#Send');

btn.addEventListener('click', function(e) {
  e.preventDefault();
  
  this.disabled = true;
  
  setTimeout(function(){ btn.disabled=false; }, 10000);
});
</script>

Код работает в других блоках (Head, Body), но мне нужно добавить его в «После заголовка».

Пожалуйста, помогите, как мне это сделать?

2

Возможно, добавьте скрипт в заголовок, а кнопку — после заголовка.

3

Я пытаюсь добавить кнопку в after header, а код со скриптом — в header. Кнопку я вижу, но скрипт не работает.

Это работает только если добавить весь код (кнопку + скрипт) в head_tag, в других секциях не работает. Мне нужно добавить это в after_header :frowning:

4

Это просто невозможно. Обратите внимание: в руководстве для разработчиков указано, что у вас есть только три варианта размещения скриптов для их запуска:

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

Когда вы пробовали разделить скрипт в секции head и кнопку в after_header, вы уверены, что скрипт вообще не запускается, или проблема в том, что вы не можете выбрать кнопку? Это может быть связано с особенностями работы цикла выполнения Ember.

Возможно, стоит попробовать обернуть ваш скрипт в:

<script type="text/discourse-plugin" version="0.8" >
api.onPageChange(() => {
   var btn = document.querySelector('#Send');

   btn.addEventListener('click', function(e) {
     e.preventDefault();
  
    this.disabled = true;
  
     setTimeout(function(){ btn.disabled=false; }, 10000);
   });

});
</script>
5

Я нашёл решение здесь: Add custom content that only appears on your homepage

Спасибо :slight_smile: