前回に続いて、turbolinksの話。
今回は、turbolinksをもとで、ページに含まれる<script>がどう実行されるか説明します。
前回と同様に以下の２つのファイルを用意します。
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Turbolinks</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.0.3/turbolinks.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).on('turbolinks:load', function() {
$("#button").click(function(){
$("#box").animate({left: '250px'});
});
});
</script>
</head>
<body>
<h1>Turbolinks</h1>
<ul>
<li><a href="page1.html">ページ 1</a></li>
</ul>
<button id="button">箱を動かす</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
CDNでturbolinksとjqueryを読み込んでいるところ注意してください。
html lang="ja">
<head>
<meta charset="utf-8">
<title>ページ 1</title>
<script>
$(document).ready(function() {
$("#button2").click(function(){
$("#box").animate({left: '10px'});
});
});
</script>
</head>
<body>
<h1>ページ 1</h1>
<p><a href="index.html">戻る</a></p>
<button id="button">箱を動かす</button> <button id="button2">箱を戻す</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
最初のページで、「箱を動かす」のボタンをクリックすると、箱が右へ移動します。
「ページ１」をクリックして、ページ１に行くと今度も同じく「箱を動かす」のボタンをクリックすると、箱が右へ移動します。このjqueryのコードがページ１(page1.html)になくても。
以下にアップしたので、そこで体験できます。
https://larajapan.lotsofbytes.com/turbolinks/2/index.html
ここで大事なのは、通常なら、
$(document).ready(function() {
..
});
とするところ、
$(document).on('turbolinks:load', function() {
..
});
とします。window.onloadやjQueryのreadyは、index.htmlがロードしたときにのみ実行されますが、ページ１のリンクのクリックでページ１をajaxで読み込むときには実行されません。ゆえに、ページ１では「箱を動かす」ボタンをクリックしても箱は移動しません。
一方、turbolinks:loadを使用すると、リンク先のページにjavascriptのコードがなくとも、index.htmlのコードを実行します。
さらに、turbolinksは、リンク先のファイル（ここではpage1.html）に、現在のファイル（ここではindex.html）に存在しない、<script>のコードがあるなら、それもロードしてくれます。それゆえに、「箱を動かす」のボタンをクリックすると、箱が右へ移動するし、「箱を戻す」をクリックすると、箱は左に移動します。
最後に、今回の例はturbolinksの機能の説明のために、このようなjavascriptのコードとなること理解してください。実際にはpage1.htmlがブックマークされていて、次回のアクセスがそこから始まるなら現在のpage1.htmlのコードでは困ります。つまり、page1.html自体が更新されても同様な動作となる必要があります。
メルマガ購読の申し込みはこちらから。