4 ms·

Using pushState? Make sure your links are fine

56 points by jcxplorer 14y ago

jordanlev 14y 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)?
- pbiggar 14y 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.
- deleted 14y ago
  [deleted]
- deleted 14y ago
  [deleted]
JoshTriplett 14y 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 14y 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?
  - JoshTriplett 14y 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.
- skymt 14y 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.
  - JoshTriplett 14y 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".
    - skymt 14y ago
      I read the article as simply suggesting that developers create real, genuine <a>-tag links in their modern pushState-using web apps. Doubtful that there are enough people specifically overriding middle-clicking on links to warrant a blog post. For example (and not to call anyone out), there's this demo (warning: will fill your history): http://bodytag.org/rollstate/ http://bodytag.org/rollstate/ Looking at its source, it uses real <a> tags for its pushState() links, but with href="#". If you click on "contact", then middle-click "about", a new tab will open to "/rollstate/contact" (which 404s, another pushState() no-no).
      - pbiggar 14y ago
        Actually, there are. If you override the click handler on a link, you'll override the Cmd-click handler as a side-effect. My site does this (by accident), and I eventually had to ask StackOverflow to find that Sammy.JS (my client-side router) was doing it.
        damncabbage 14y ago
- pbiggar 14y 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-doesnt-open-a-new-tab-but-middle-click-does http://stackoverflow.com/questions/10660360/command-click-do...
drivebyacct2 14y 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.
alanh 14y 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 14y ago
  Or `jQuery("a[href^='/']")` and you don't need extra attributes at all.
  - jcxplorer 14y 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 :)
    - saurik 14y ago
      Do you really never use relative URLs?
- jcxplorer 14y ago
  Author here. You are absolutely right! I just updated the blog post and used bcherry's solution. `rel="internal"` is indeed not standardized.
  - alanh 14y ago
    I love you for updating. It shows you take tech blogging as the serious responsibility it is! :)
pbiggar 14y ago
The author is very right. The links on my site (https://circleci.com 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-doesnt-open-a-new-tab-but-middle-click-does http://stackoverflow.com/questions/10660360/command-click-do...
pud 14y 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 http://fandalism.com
- zeroonetwothree 14y ago
  Middle clicking is broken on those links.
- derpmeister 14y ago
  Looks borked from here: http://imgur.com/6ZDvR http://imgur.com/6ZDvR
jchavannes 14y 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.

56 points by jcxplorer 14y 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)?

pbiggar 14y 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.
deleted 14y ago
[deleted]
deleted 14y ago
[deleted]

JoshTriplett 14y 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 14y 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?
- JoshTriplett 14y 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.
skymt 14y 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.
- JoshTriplett 14y 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".
  - skymt 14y ago
    I read the article as simply suggesting that developers create real, genuine <a>-tag links in their modern pushState-using web apps. Doubtful that there are enough people specifically overriding middle-clicking on links to warrant a blog post. For example (and not to call anyone out), there's this demo (warning: will fill your history): http://bodytag.org/rollstate/ http://bodytag.org/rollstate/ Looking at its source, it uses real <a> tags for its pushState() links, but with href="#". If you click on "contact", then middle-click "about", a new tab will open to "/rollstate/contact" (which 404s, another pushState() no-no).
    - pbiggar 14y ago
      Actually, there are. If you override the click handler on a link, you'll override the Cmd-click handler as a side-effect. My site does this (by accident), and I eventually had to ask StackOverflow to find that Sammy.JS (my client-side router) was doing it.
      - damncabbage 14y ago
pbiggar 14y 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-doesnt-open-a-new-tab-but-middle-click-does http://stackoverflow.com/questions/10660360/command-click-do...

drivebyacct2 14y 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.

alanh 14y 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 14y ago
Or `jQuery("a[href^='/']")` and you don't need extra attributes at all.
- jcxplorer 14y 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 :)
  - saurik 14y ago
    Do you really never use relative URLs?
jcxplorer 14y ago
Author here. You are absolutely right! I just updated the blog post and used bcherry's solution. `rel="internal"` is indeed not standardized.
- alanh 14y ago
  I love you for updating. It shows you take tech blogging as the serious responsibility it is! :)

pbiggar 14y ago

The author is very right. The links on my site (https://circleci.com 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-doesnt-open-a-new-tab-but-middle-click-does http://stackoverflow.com/questions/10660360/command-click-do...

pud 14y 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 http://fandalism.com

zeroonetwothree 14y ago
Middle clicking is broken on those links.
derpmeister 14y ago
Looks borked from here: http://imgur.com/6ZDvR http://imgur.com/6ZDvR

jchavannes 14y 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.