Scripts

There are two ways of adding third party scripts. ‘Embedding’ is ideal for one-off scripts, while ‘global scripts’ loaded on every page.

There are two ways of adding third party scripts. Embedding is ideal for one-off scripts, e.g. widgets.js that is part of embedded tweets (see below). Adding global scripts is for scripts that should be loaded on every page.

Table of Contents

Embedding

Hydejack supports embedding third party scripts directly inside markdown content. This will work in most cases, except when a script can not be loaded on a page more than once (this will occur when a user navigates to the same page twice).

NOTE: Adding “raw” script tags will make the page slow, unless they have the async or defer attribute set. For more see below.

Example:

<script asyncsrc="//platform.twitter.com/widgets.js"charset="utf-8"></script><blockquoteclass="twitter-tweet"data-lang="en"><plang="en"dir="ltr">
The next version of Hydejack (v6.3.0) will allow embedding 3rd party scripts,
like the one that comes with this tweet for example.
</p>&mdash; Florian Klampfer (@qwtel)
<ahref="https://twitter.com/qwtel/status/871098943505039362">June 3, 2017</a></blockquote>

The next version of Hydejack (v6.3.0) will allow embedding 3rd party scripts, like the one that comes with this tweet for example.— Florian Klampfer (@qwtel) June 3, 2017

Global scripts

If you have scripts that should be included on every page you can add them globally by opening (or creating) _includes/my-scripts.html and adding them like you normally would:

async vs. defer vs. loadJSDeferred

I highly recommended setting the async or defer attribute on your external scripts, otherwise the entire page can’t finish loading until a separate HTTP request is completed, which can take a long time (this applies to the web in general, not just Hydejack).

Specific to Hydejack is the loadJSDeferred function, which is used to load Hydejack’s own scripts. It has various advantages which are detailed in the table below.

async

defer

loadJSDeferred

Download

immediately

immediately

after document load

Execution

asap

before document load

after document load

Ordering

none

preserves order

via callback nesting

Support

IE8+

IE9+

IE5+ (Hydejack only)

Using loadJSDeferred

Using loadJSDeferred is slightly more work than just adding defer to a script tag.

Registering push state event listeners

When embedding scripts globally you might want to run some init code after each page load. However, the problem with push state-based page loads is that the load event won’t fire again. Luckily, Hydejack’s push state component exposes an event that you can listen to instead.