Prevent anchor links
JuanitoFatas opened this issue · 2 comments
Hello.
Is there a way to prevent hovering anchor links being fetched? Something like:
document.addEventListener("instantpage:mouseover", (event) => {
const anchorElement = event.target
const isSamePageAnchor = (
anchorElement.hash &&
anchorElement.origin === window.location.origin &&
anchorElement.pathname === window.location.pathname
)
if (isSamePageAnchor) return
// do what instant page was doing
})
Does instantpage:mouseover
event exist?
I could add data-no-instant
to anchor links but I would like to keep the HTML clean.
Thanks and sorry if it‘s being asked already that I could not find it.
I discovered it’s a bug of Firefox. Chrome and Safari won‘t preload anchor links. Closing this.
Hi @JuanitoFatas @dieulot ,
I would like this to be re-opened, as I found this is causing an issue here. InstantPage will indeed preload links to an empty anchor (such as "#"). This is actually causing us an issue.
In our case, we are working on a Shopify theme, and we want to ensure that cart links are never preloaded. We therefore add a data-no-instant
on the cart link we generate ourself.
However, we have had some merchants who enter in their navigation a link to "#" (just the hash character). If a merchant would actually be on the /cart
page, and that the customer would hover such a link, anchorElement.href
would effectively resolve to /cart
and Instant.Page would preload the page, which is undesirable.
There should probably have an exception here to not preload this.