3.15
Search docs… /
Menu
Skill

Learn Handling all links

You can configure Unpoly to handle every link on the page, without annotating each link with an [up-follow] attribute.

Clicks then update fragments instead of loading full pages, and you need fewer [up-...] attributes in your HTML.

Note

Forms can be handled the same way. See Handling all forms.

To follow all links on a page without requiring an [up-follow] attribute:

up.link.config.followSelectors.push('a[href]')

Some links will fall back to default browser behavior under this setting:

  • Links with an [up-follow=false] attribute. Also see boolean attributes.
  • Links with a [download] attribute.
  • Links with a [target] attribute (to target an iframe or open new browser tab).
  • Links with a javascript:, mailto: or tel: scheme.
  • Links with a cross-origin [href].
  • Links with an [href] that only contains a #hash (like # or #section) and don't also have local HTML in an [up-document], [up-fragment], or [up-content] attribute.
  • Any additional exceptions configured in up.link.config.noFollowSelectors.

Scripts that expect a full page load after every click need adjusting, see Migrating legacy JavaScripts.

To follow links on mousedown instead of click without requiring an [up-instant] attribute:

up.link.config.instantSelectors.push('a[href]')

Note that an instant link must also be followable, usually by giving it an [up-follow] attribute or by configuring up.link.config.followSelectors as shown above.

Some links will still activate on click under this setting:

If you have event listeners bound to click on accelerated links, they will no longer be called. Bind these listeners to mousedown or, better, up:click instead.

To preload all links on hover, without requiring an [up-preload] attribute:

up.link.config.preloadSelectors.push('a[href]')

Some links will not be preloaded under this setting:

Making exceptions

You can still make exceptions by setting an [up-follow=false] attribute:

<a href="/path" up-follow="false">Click for full page load</a> <!-- mark: up-follow="false" -->

[up-instant=false] and [up-preload=false] make exceptions from instant clicks and preloading in the same way.

Using a macro instead

Instead of changing up.link.config.followSelectors, you can register a macro that sets [up-follow] on every link:

up.macro('a[href]:not([up-follow=false])', function(link) {
  link.setAttribute('up-follow', '')
})

Links with [up-follow=false] are left alone. The exceptions above still apply: links with a [target] or a cross-origin [href] load a full page.

A macro can set other attributes in the same pass, like [up-preload] to preload the link on hover.