Reading URL fragments on page load

Question

In my web application I have a URL using a fragment like so:

http://example.com#login

My question is: can I use the fragment on page load to open a specific portion of my website? If so, how can I use Javascript or jQuery to read and process the fragment?

Background information: I use Remodal (https://github.com/VodkaBears/Remodal) to add custom modal windows to my website. This plugin automatically appends a fragment to the current URL when a modal window is opened. I would like to be able to open modal windows on page load.

score 3 · Accepted Answer · answered Jun 23 '15 at 08:50

3

You can use window.location.hash to read the fragment in the URL on load and the open the related modal.

var fragment = window.location.hash; // = '#login' in your example url
if (fragment) {
    $('a[href="' + fragment + '"]').remodal().open();
}

answered Jun 23 '15 at 08:50

Rory McCrossan

331,213
40
305
339

RuubW · Answer 2 · 2015-06-23T13:14:44.040

1

Edit: although it is correct that the fragment is not added to the HTTP request, the browser can still access it. See @RoryMcCrossan's answer.

https://blog.httpwatch.com/2011/03/01/6-things-you-should-know-about-fragment-urls/

Paragraph 2 states that URL fragments are not sent in HTTP requests.

Edit2:

My final code:

var fragment = window.location.hash;
if (fragment) {
    var modal = $('[data-remodal-id=' + fragment.slice(1) + ']');
    if (modal.length) modal.remodal().open();
}

edited Jun 23 '15 at 13:14

answered Jun 23 '15 at 08:45

RuubW

556
4
17

It's not sent in the HTTP request, but it's still received in the URL string by the browser, so this is entirely possible assuming the plugin lets you open a window on load. – Rory McCrossan Jun 23 '15 at 08:47
@RoryMcCrossan Could you show me how to process it in Javascript or jQuery? – RuubW Jun 23 '15 at 08:50
I added an answer for you. – Rory McCrossan Jun 23 '15 at 08:51

Reading URL fragments on page load

2 Answers2