Head

Keep the title, meta tags, canonical link and stylesheets of the document in sync with the page you navigate to.

Import it from pagefold/head (about 1.3 KB minified and compressed, shared code included).

import Pagefold from 'pagefold'
import PagefoldHead from 'pagefold/head'

new Pagefold({ plugins: [new PagefoldHead({ awaitAssets: true })] })

How it merges

The new page’s <head> is compared tag by tag with the current one.

• Tags that are identical are left exactly as they are. The browser does not reload them.
• New tags are inserted in the order the new page has them.
• Tags that only the old page has are removed, unless persistTags says to keep them.

The lang and dir attributes of the html element are copied too. Add more with attributes, using names or patterns such as /^data-/.

Scripts in the head

New <script> tags are inserted but the browser does not run them. Use the Scripts plugin for that. The two work together: an identical script that is already in the head is kept and is not run again.

Waiting for stylesheets

With awaitAssets the visit waits for the load or error event of every new stylesheet, up to timeout. This avoids a flash of unstyled content when a page brings its own CSS. Only stylesheets are awaited.

Common problems

• A stylesheet from the old page is still there. Only tags that are identical on both pages are kept. A tag that only the old page has is removed, unless you list it in persistTags.
• The page flashes without its styles. Turn on awaitAssets, so the visit waits for the new stylesheets.
• A script in the head did not run. Inserting it is not enough. Add the Scripts plugin.

Options