Using pushState? Make sure your links are fine

http://dev.tenfarms.com/posts/proper-link-handling

by jcxplorer • 14 years ago

56 35 14 years ago

dev.tenfarms.com

jordanlev• 14 years ago

Your post brings up a great point, and I hate it when I can't open links in new windows (Harvest invoice/estimate list, I'm looking at you!). But I wonder if there's a way to handle it in a more abstract fashion -- in the sense that you let the browser tell you if a link is to be opened in a new window/tab, as opposed to hardcoding various keyboard buttons.

For example, does your technique handle middle-clicks (clicking on the middle mouse button, which is equivalent to shift-clicking)?

pbiggar8• 14 years ago

On a Mac, middle-click is not exactly the same as Cmd-clicking. Middle-click can't be overridden, Cmd-click can. On my site, middle clicking works fine, but I have to put in a hack to make Cmd-click work.

JoshTriplett3• 14 years ago

Something seems fundamentally wrong here. If I middle-click or ctrl-click on a link, the browser shouldn't allow the site to interfere with that, accidentally or otherwise. Those shortcuts represent part of browser chrome, just like the shortcuts for the URL bar, the search bar, and the back button.

tlack• 14 years ago

I agree with your sentiment in general but I think this is a case where Javascript's control is justified. What if you had a game in which ctrl-click moved a group of units?

JoshTriplett3• 14 years ago

Then don't use an <a> tag, and you can capture more types of events. :) But when a page uses a link, the browser should ensure that it behaves like a link, including the ability to determine whether that link opens in the same tab/window or a different tab/window.

Or, more generally, you could request additional permissions from the browser; see the recent specifications for mouse capture and gamepad use.

skymt2• 14 years ago

It's not that pushState() apps interfere with middle-clicking on links, it's that they have no real links to middle-click on. Common practice is to have a <div> or <span> (or maybe <a> without an href) styled to look like a link/button, then onclick run some code that performs a task and changes the URL with pushState(). This article suggests making your pushState() "links" actual links to the desired URL, then overriding the unmodified click case to run the desired code rather than fetch a new page from the server.

JoshTriplett3• 14 years ago

I understood that much, and sure, if you try to construct browser links from scratch then their behavior won't match the behavior of real browser links. However, if you really do have an <a> tag, then you should only have the ability to override the "unmodified click case".

alanh4• 14 years ago

Oh god — that’s common practice? … What happened to progressive enhancement & unobtrusive JS being best practices?

derefr• 14 years ago

Really, it seems like a middle-click should just be a sent as a regular click event to Javascript, but with all document.href edits and window.open calls redirected to act on a new tab.

pbiggar8• 14 years ago

Middle-clicking is taken directly by the browser. Cmd-clicking can be overridden by click handlers. Both left- and right-clicking can be overridden, so that is at least consistent.

Some reference: http://stackoverflow.com/questions/10660360/command-click-do...

drivebyacct2• 14 years ago

Wow, I feel really stupid. I had no idea that the browser let JS override the default on regular <a>'s with onclick handlers with modifier keys.

No wonder so many gdamn sites get it wrong. Nothing infuriates me more than whichever lightbox implementation always sieves control of my ctrl+clicks and then doesn't allow me to view the picture in a larger size. Infuriating.

alanh4• 14 years ago

  rel="internal"

raised my eyebrows. Yes, it makes sense. But the `rel` attribute is not to be used lightly and values are not to be invented on a whim, because eventually the value can be defined for all sites, not just yours.

Without thoroughly researching it, it looks like `rel=internal` is not standardized. That means you should not use it!

Instead, consider:

  <a href="/page" data-push-state="push">Foo</a>

and

  jQuery('a[data-push-state=push]')

The data-* attributes are explicitly defined as open for your own invention and use.

bcherry• 14 years ago

Or `jQuery("a[href^='/']")` and you don't need extra attributes at all.

jcxplorer2• 14 years ago

Great suggestion, thanks! I just updated the blog post with. I'll be happy to link to your site/twitter at the end of the post if you give me that information :)

jcxplorer2• 14 years ago

Author here. You are absolutely right! I just updated the blog post and used bcherry's solution. `rel="internal"` is indeed not standardized.

alanh4• 14 years ago

I love you for updating. It shows you take tech blogging as the serious responsibility it is! :)

pbiggar8• 14 years ago

The author is very right. The links on my site (https://circleci.com) don't work if you middle-click them. Some kind StackOverflow users found the problem, which appears to be the click handler in Sammy.JS.

A lot more info about this is in the question, an the links from it, including history, Mozilla accessibility discussion, and code samples:

http://stackoverflow.com/questions/10660360/command-click-do...

pud• 14 years ago

Good timing. About 5 minutes ago I pushed this live on my site. Click any of the video thumbnails here to see (and report bugs if you find any..:)

Also, I'm using hashbangs if the browser doesn't support pushState (like IE).

And if you're visiting from a mobile browser, I don't do any of the pushState fanciness either.

http://fandalism.com

zeroonetwothree• 14 years ago

Middle clicking is broken on those links.

derpmeister• 14 years ago

Looks borked from here: http://imgur.com/6ZDvR

jchavannes• 14 years ago

I'd argue the majority of the time hashbangs should be used over pushstate. Until HTML5 is the norm (>99%, so basically never) there isn't much reason to use pushstate. I know this is not what this article is about so I'm not going to go into detail.

Using pushState? Make sure your links are fine

Related Stories