헤더 뒤에 JS를 추가하는 방법?

제품 지원
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)에서는 코드가 정상적으로 작동하지만, 저는 이 코드를 After Header 부분에 추가해야 합니다.

어떻게 해야 하는지 도와주세요.

2

스크립트는 헤더에, 버튼은 헤더 뒤에 추가하는 것이 좋을 것 같습니다.

3

나는 after header에 버튼을 추가하고, 스크립트 코드는 header에 추가하려고 합니다. 버튼은 보이지만 스크립트는 작동하지 않습니다.

모든 코드(버튼 + 스크립트)를 head_tag에 추가할 때만 작동하고, 다른 섹션에서는 작동하지 않습니다. 이 코드를 after_header에 추가해야 하는데 :(,

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: