ヘッダーの後でJSを追加する方法

サポート
1

こんにちは！

テーマコンポーネントの「ヘッダーの後」にスクリプトを追加したいのですが、機能しません。

コード：

<button type="button" class="btn btn-outline btn-small" id="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>

コードは他のブロック（ヘッダー、本文）では機能しますが、「ヘッダーの後」に追加する必要があります。

どうすればよいか教えていただけますか？

2

スクリプトをヘッダーに追加し、ボタンをヘッダーの後に配置することを提案します。

3

ヘッダーの「後」にボタンを追加しようとしていますが、スクリプトを含むコードは「ヘッダー」に追加しています。ボタンは表示されますが、スクリプトは機能しません。

すべて（ボタンとスクリプト）を「head_tag」に追加した場合のみ機能し、他のセクションでは機能しません。「after_header」に追加する必要があります :frowning:

4

これは単純に不可能です。開発者ガイドには、スクリプトタグを発火させるための3つのオプションしかないことが記載されています。

after_header にコードを入れる特別な理由がありますか？必要としていることを達成するための他のアプローチがあるかもしれません。

head でスクリプトを分離し、after_header でボタンを分離しようとしたとき、スクリプトがまったく発火しないのか、それともボタンを選択できないのか、確かですか？それは Ember の runloop の方法によるものかもしれません。

おそらく、スクリプトを次のようにラップしてみてください。

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

これで見つけました: Add custom content that only appears on your homepage

ありがとうございます :slight_smile:

「いいね！」 2