Search code examples
javascripthtmlturbolinks

How does TurboLinks display response HTML?


I am studying the basic internal functionality of the JavaScript TurboLinks framework at the moment. From what I understand, onclick events are assigned to all anchor tags to be able to prevent the default action (full page reload) and load the link content via AJAX instead. Please correct me if I am wrong here.

When the AJAX callback receives the whole HTML document as a string, how can it be rendered without (re)loading script and style tags?


Solution

  • Scripts and styles will only be (re)loaded and evaluated when they are inserted into a page. When the HTML is received via AJAX, Turbolinks creates a new HTML document behind-the-scenes, and sets its content to the HTML response. As this is not yet rendered/inserted, the browser does not download/evaluate any scripts or styles. The <head> of the new document can now be compared to the current one and additional assets can be added as necessary.

    In terms of the specific Turbolinks components: