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

**URL:** https://meta.discourse.org/t/how-to-add-js-in-after-header/231100
**Category:** Support
**Created:** [25.Июнь.2022 19:34:54 UTC](https://meta.discourse.org/t/how-to-add-js-in-after-header/231100 "2022-06-25T19:34:54Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![DragonByte](https://avatars.discourse-cdn.com/v4/letter/d/41988e/32.png) [@DragonByte](https://meta.discourse.org/u/DragonByte)
#### Post date: [25.Июнь.2022 19:34:55 UTC](https://meta.discourse.org/t/how-to-add-js-in-after-header/231100/1 "2022-06-25T19:34:55Z")

</div>

Привет!

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

Код:

```plaintext
<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), но мне нужно добавить его в «После заголовка».

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

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [26.Июнь.2022 15:54:41 UTC](https://meta.discourse.org/t/how-to-add-js-in-after-header/231100/2 "2022-06-26T15:54:41Z")

</div>

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

---

<div class="post-metadata">

### Author: ![DragonByte](https://avatars.discourse-cdn.com/v4/letter/d/41988e/32.png) [@DragonByte](https://meta.discourse.org/u/DragonByte)
#### Post date: [26.Июнь.2022 17:10:03 UTC](https://meta.discourse.org/t/how-to-add-js-in-after-header/231100/3 "2022-06-26T17:10:03Z")

</div>

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

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

---

<div class="post-metadata">

### Author: ![keegan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/keegan/32/383395_2.png) [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [27.Июнь.2022 06:09:15 UTC](https://meta.discourse.org/t/how-to-add-js-in-after-header/231100/4 "2022-06-27T06:09:15Z")

</div>

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

> [@Johani](#):
>
> Теперь, поскольку это скрипт, нужно быть немного более внимательным к месту его добавления, чтобы обеспечить его запуск. У вас есть один из трёх вариантов:
> 
> ![13](https://global.discourse-cdn.com/meta/original/3X/5/a/5a755d478b693a4520c3da4b13bc7aa6d9b4e9a6.PNG)
> 
> 1. Секция `</head>`
> 2. Секция заголовка
> 3. Секция `</body>`
> 
> Добавление скрипта в любую другую секцию приведёт к тому, что он не сработает.

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

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

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

```js
<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>

```

---

<div class="post-metadata">

### Author: ![DragonByte](https://avatars.discourse-cdn.com/v4/letter/d/41988e/32.png) [@DragonByte](https://meta.discourse.org/u/DragonByte)
#### Post date: [27.Июнь.2022 11:08:17 UTC](https://meta.discourse.org/t/how-to-add-js-in-after-header/231100/5 "2022-06-27T11:08:17Z")

</div>

Я нашёл решение здесь: [Add custom content that only appears on your homepage](https://meta.discourse.org/t/how-to-add-custom-content-that-only-appears-on-your-homepage/131415)

Спасибо 🙂

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [16.Август.2022 11:14:02 UTC](https://meta.discourse.org/t/how-to-add-js-in-after-header/231100/6 "2022-08-16T11:14:02Z")

</div>