Add ability to re-run scripts on back/forward navigation

...by specifying data-turbolinks-eval=true on the <script> tag.

CHANGELOG.md

@@ -120,6 +120,10 @@
 
     *Nick Reed*
 
+*   Add ability to re-run scripts on back/forward navigation by specifying `data-turbolinks-eval=true` on the `<script>` tag.
+
+    *Thibaut Courouble*, *Kevin Hughes*
+
 ## Turbolinks 2.5.3 (December 8, 2014)
 
 *   Prevent the progress bar from filling the entire screen in older versions of Safari.

README.md

@@ -209,6 +209,14 @@ As a rule of thumb when switching to Turbolinks, move all of your javascript tag
 </script>
 ```
 
+Turbolinks will not re-evaluate script tags on back/forward navigation, unless their `data-turbolinks-eval` attribute is set to `true`:
+
+```html
+<script type="text/javascript" data-turbolinks-eval=true>
+  console.log("I'm run on every page load, including history back/forward");
+</script>
+```
+
 Triggering a Turbolinks visit manually
 ---------------------------------------
 

lib/assets/javascripts/turbolinks.js.coffee

@@ -147,7 +147,8 @@ changePage = (doc, options) ->
     CSRFToken.update csrfToken if csrfToken?
     setAutofocusElement()
 
-  executeScriptTags() unless options.runScripts is false
+  scriptsToRun = if options.runScripts is false then 'script[data-turbolinks-eval="true"]' else 'script:not([data-turbolinks-eval="false"])'
+  executeScriptTags(scriptsToRun)
   currentState = window.history.state
 
   triggerEvent EVENTS.CHANGE
@@ -184,8 +185,8 @@ onNodeRemoved = (node) ->
     jQuery(node).remove()
   triggerEvent(EVENTS.AFTER_REMOVE, node)
 
-executeScriptTags = ->
-  scripts = document.body.querySelectorAll 'script:not([data-turbolinks-eval="false"])'
+executeScriptTags = (selector) ->
+  scripts = document.body.querySelectorAll(selector)
   for script in scripts when script.type in ['', 'text/javascript']
     copy = document.createElement 'script'
     copy.setAttribute attr.name, attr.value for attr in script.attributes

test/javascript/iframe.html

@@ -21,5 +21,6 @@
   <div id="permanent" data-turbolinks-permanent>permanent content</div>
   <div id="temporary" data-turbolinks-temporary>temporary content</div>
   <script>window.i = window.i || 0; window.i++;</script>
+  <script data-turbolinks-eval="true">window.k = window.k || 0; window.k++;</script>
 </body>
 </html>

test/javascript/turbolinks_visit_test.coffee

@@ -164,6 +164,7 @@ suite 'Turbolinks.visit()', ->
       if change is 1
         @document.addEventListener 'page:fetch', -> fetchCalled = true
         assert.equal @window.i, 1
+        assert.equal @window.k, 1
         assert.equal @window.j, 1
         assert.equal @document.title, 'title 2'
         assert.notOk @document.querySelector('#div')
@@ -172,7 +173,8 @@ suite 'Turbolinks.visit()', ->
         , 0
       else if change is 2
         assert.notOk fetchCalled
-        assert.equal @window.i, 1
+        assert.equal @window.i, 1 # normal scripts are not re-run
+        assert.equal @window.k, 2 # data-turbolinks-eval="true" scripts are re-run
         assert.equal @window.j, 1
         assert.equal @document.title, 'title'
         assert.notOk @document.querySelector('#new-div')