Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I use #-URLs in a single-page application?

This article makes a pretty convincing argument that because URLs are long-lived (they get bookmarked and passed around), they should be meaningful, and that using the hash for real routing (determining what data is shown on the page and/or the state of the application) is thus improper. When I try to actually do that in my single-page application, though, I run up against a problem: how do I render my links so that all browsers can use the application? As I see it, there are three options:

  1. all hrefs have a #/ prefix. This works great in HTML4 browsers. In HTML5 browsers, I can add a Sammy route that redirects to the hash-less version, which also works great. There might be a problem with browsers marking links as visited when they're not or not marking them visited when they are. The other problem is that it's... wrong. Anyone who shares a link by right-clicking it and selecting "Copy Link URL" will be sending a working but kludgy URL around.
  2. no hrefs have a #/ prefix. As far as I can tell, HTML4 browsers will have no way of intercepting these link clicks, which means that every one will cause a page refresh. Though the application would probably still function, since I could use Sammy routes to rewrite the hashless versions to hashy ones on page load, the page loads would kill the performance of the single-page application.
  3. I dynamically determine whether to prefix with #/ or not. This means that all of my links have to have dynamic markup and dramatically complicates the application.
like image 272
James A. Rosen Avatar asked Oct 11 '11 16:10

James A. Rosen


People also ask

What is CanIUse com?

What is CanIUse? # CanIUse is an extremely useful tool for quickly visualizing which frontend technologies are compatible with which browsers. You've likely seen us include various CanIUse support table screenshots in our blog.

Can I use VH VW?

vh and vw in actionTo use vh and vw values, just type “Nvh” or “Nvw” (where “N” represents the percentage of the viewport you'd like to cover) into any width or height field. So to cover 100% of the viewport, you'd set 100% for the width and 100vh for the height.

Can I use video HTML?

<video>: The Video Embed element. The <video> HTML element embeds a media player which supports video playback into the document. You can use <video> for audio content as well, but the <audio> element may provide a more appropriate user experience.


1 Answers

The hash value of a URL never caused and entire re-load of page. Not in HTML4 and before that. A hash value has always been an internal link, and therefore it can be used perfectly (take a look at twitter for example). Of course, when you refresh the page, you will reload the page. But that is obvious.

With JavaScript you can actually read this hash value (see also this question/answer: How can you check for a #hash in a URL using JavaScript?) using window.location.hash

Using a more recent browser, you can also detect a hash change, which is useful if users actually change the URL: On - window.location.hash - Change?

But when you, as the website, change the URL you don't need read this, you already know because you just changed it.

This way, using hashes, people can exchange the URLs, and you can actually read which URL they are requesting, and therefore it should work perfectly.

like image 71
Rene Pot Avatar answered Oct 14 '22 06:10

Rene Pot