実行環境
- ruby ver3.1.2
- ruby on rails ver6.1.7.3
- node ver16.20.0
質問内容
現状
現在、ruby on railsでturbolinksを使った際の挙動に悩んでいます。
トップページとアバウトページを作っており、以下のようなコードを書いています。
top.html.erb
<p>top page</p>
<%= link_to 'top page', homes_top_path %>
<%= link_to 'about page', homes_about_path %>
<script type="text/javascript">
document.addEventListener('turbolinks:load', function() {
let x = 'test1';
let y = 'test2';
let z = 'test3';
console.log(x);
console.log(y);
console.log(z);
});
</script>
about.html.erb
<p>about page</p>
<%= link_to 'top page', homes_top_path %>
<%= link_to 'about page', homes_about_path %>
<script type="text/javascript">
document.addEventListener('turbolinks:load', function() {
let x = 'test4';
console.log(x);
});
</script>
この状態でトップページを最初に読み込むと、console上で以下のようになります。
その後、アバウトページにリンクを押して遷移すると、console上で以下のようになります。
実現したいこと
turbolinksを使った画面遷移を行った際、とび先のページに存在するscriptタグのコードのみを実行したいです。
今回の例でいうと、トップページからアバウトページに遷移した際に、console上でtest4だけが表示されるようにしたいです。
turbolinksはソースをキャッシュするというのは何となく知っているのですが、どうすれば上記のことを実現できるのかわかりません。