# フッターを対象とするJavaScriptがページ遷移後に機能しない
**URL:** https://meta.discourse.org/t/javascripts-targeting-the-footer-doesnt-work-after-page-transitions/180012
**Category:** Development
**Created:** [2021 年 2 月 17 日午前 11:16 UTC](https://meta.discourse.org/t/javascripts-targeting-the-footer-doesnt-work-after-page-transitions/180012 "2021-02-17T11:16:39Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@narayanan](https://meta.discourse.org/u/narayanan)
#### Post date: [2021 年 2 月 17 日午前 11:16 UTC](https://meta.discourse.org/t/javascripts-targeting-the-footer-doesnt-work-after-page-transitions/180012/1 "2021-02-17T11:16:39Z")
フッターメニューをレスポンシブにするための CSS を作成しました。モバイルデバイスに遷移すると、フッターメニューはハンバーガーメニューと同様に設計されます。そのため、 **Edit Css/Html \>\> /head** セクションにクリック関数を記述し、モバイルビューでのメニューの切り替えを実装しました。
このクリック関数は Discourse のホームページでは正常に動作しましたが、Summary や Forum Account などの他のページではスクリプトがブロックされました。そのため、サブメニューが表示されません。ブラウザのソースコードを確認しても、スクリプトは存在していることが確認できます。
**なぜ Discourse の一部のページでカスタムスクリプトの実行がブロックされるのでしょうか？この問題に対する恒久的な解決策は何ですか？**
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [2021 年 2 月 17 日午前 11:44 UTC](https://meta.discourse.org/t/javascripts-targeting-the-footer-doesnt-work-after-page-transitions/180012/2 "2021-02-17T11:44:40Z")
Discourse はシングルページアプリケーションです。そのため、`` タグに追加したスクリプトは、適切なフックを使用しない限り、初期ページ読み込み時に一度だけ実行されます。イベントリスナーを追加するようにコードを調整する必要があるかもしれません。
コードを共有していただけますか？
---
### Author:  [@narayanan](https://meta.discourse.org/u/narayanan)
#### Post date: [2021 年 2 月 17 日午後 1:37 UTC](https://meta.discourse.org/t/javascripts-targeting-the-footer-doesnt-work-after-page-transitions/180012/3 "2021-02-17T13:37:22Z")
こちらが私のスクリプトです。
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [2021 年 2 月 19 日午前 6:13 UTC](https://meta.discourse.org/t/javascripts-targeting-the-footer-doesnt-work-after-page-transitions/180012/4 "2021-02-19T06:13:17Z")
これに対処する方法はいくつか考えられますが、まずは適切なカスタマイズフックを使用した「正しい」方法で試してみましょう。
テーマのフッターセクションに HTML を追加すると、Discourse はページ遷移時や無限スクロールでより多くの要素が追加された際に、要素が飛び跳ねないように処理を行います。
これは `custom-html` コンポーネントとしてここに追加されます。
[discourse/app/assets/javascripts/discourse/app/templates/application.hbs at a0bbc346cb5d5b89d1a3efdfa89869349a8b067f · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/a0bbc346cb5d5b89d1a3efdfa89869349a8b067f/app/assets/javascripts/discourse/app/templates/application.hbs#L31)
コンポーネントのコードを見ると、レンダリング時にアプリイベントを発火させることがわかります。
[discourse/app/assets/javascripts/discourse/app/components/custom-html.js at a0bbc346cb5d5b89d1a3efdfa89869349a8b067f · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/a0bbc346cb5d5b89d1a3efdfa89869349a8b067f/app/assets/javascripts/discourse/app/components/custom-html.js#L24-L29)
これが使用すべきフックです。
どのように使用すればよいでしょうか？
[plugin-api](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/plugin-api.js) には、特定のアプリイベントが発火したときにコードを実行できるメソッドがあります。
[https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/plugin-api.js#L507-L519](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/plugin-api.js#L507-L519)
イベント名は既知なので、以下のように使用できます。
```javascript
api.onAppEvent("inserted-custom-html:footer", () => {
// ここで作業を行います
});
```
これは plugin-API のメソッドであるため、スクリプトタグの type を `text/discourse-plugin` に変更する必要があります。
```xml
```
上記のスニペットは、フッターがレンダリングされるたびに発火します。したがって、以下のような処理が可能になります。
```xml
```
plugin-API については、[こちら](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648#heading--4-c) で詳しく読むことができます。
---
### Author:  [@narayanan](https://meta.discourse.org/u/narayanan)
#### Post date: [2021 年 2 月 19 日午前 10:54 UTC](https://meta.discourse.org/t/javascripts-targeting-the-footer-doesnt-work-after-page-transitions/180012/5 "2021-02-19T10:54:15Z")
素晴らしい、ありがとう 🙂