Como adicionar JS no After Header?

Suporte
1

Olá!

Quero adicionar um script em “After Header” no meu componente de tema, mas isso não funciona.

código:

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

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

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

O código funciona em outros blocos (Head, Body), mas preciso adicioná-lo em After Header.

Por favor, ajude-me, como posso fazer isso?

2

Talvez adicionar o script no cabeçalho e o botão após o cabeçalho.

3

Tento adicionar um botão em after header e o código com script em header, vejo o botão, mas o script não funciona.

Ele só funciona se eu adicionar todo o código (botão + script) em head_tag, em outras seções não funciona, preciso adicionar isso em after_header :frowning:

4

Isso simplesmente não é possível. Observe que o guia do desenvolvedor menciona que você tem apenas três opções para a execução de tags de script:

Existe alguma razão específica pela qual você precisa do código em after_header? Pode haver outras abordagens que você possa adotar para alcançar o que precisa.

Quando você tentou separar o script no head e o botão em after_header, você tem certeza de que o script não está sendo executado, ou é que você não consegue selecionar o botão? Pode ser devido à forma como o Ember runloop funciona.

Talvez você possa tentar envolver seu script em um

<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>
3 curtidas
5

Encontrei a solução em: Add custom content that only appears on your homepage

Obrigado :slight_smile:

2 curtidas