$location.url(url).replace() with HTML5Mode on causes page reload

[poshest]

This is a bug, all browsers. I believe it was introduced as part of these changes.

I have a page with elements. Clicking on an element should add the elementID as a hash thus

http://mysite.com/basepath#elementID

... but without any history changes. Like how Google docs headings create an anchor tag so you can share a deeplink with friends. So I'm adding the elementID to the current url (or replacing an existing hash with a new one) and then calling $location.url(url).replace().

The trouble is on every element click, the page reloads. The trouble is in this block

 var sameBase = lastBrowserUrl && stripHash(lastBrowserUrl) === stripHash(url);
 ...
  // Don't use history API if only the hash changed
  // due to a bug in IE10/IE11 which leads
  // to not firing a `hashchange` nor `popstate` event
  // in some cases (see #9143).
  if ($sniffer.history && (!sameBase || !sameState)) {
    history[replace ? 'replaceState' : 'pushState'](state, '', url);
    cacheState();
  } else {
 ...
    if (replace) {
      location.replace(url);
    }
 ...
 }

I really want a history.replaceState, but instead, because of the "sameBase" logic, I'm heading into the IE bug fallback territory (even on Chrome, Firefox, etc). Calling location.replace() at this point reloads the page, which is not what I want.

I spent hours trying to get a Plunkr working for this. http://plnkr.co/edit/ugSUq7NdQonCS94JlbIj It adequately describes my use case, but I cannot re-create the reload issue. I believe it's because the Plunkr is run in an iframe for which location.replace() doesn't actually do a reload? :P

HEADS UP! The Plunkr will not work out of the box. That <base> tag which is required by HTML5Mode means I have to (at least I didn't find another way) hard code the URL from which Plunkr serves the sandboxed code. AND THAT URL CHANGES FOR EVERY SESSION! :/ :/ :/ So to get the Plunkr working, you need to

1. open dev tools
2. hit Stop and Run on the Plunkr
3. find the request which looks like http://run.plnkr.co/2DiB4CfmPFdmyPMp/ and put the 2DiB4CfmPFdmyPMp into the <base> tag, eg <base href="//run.plnkr.co/2DiB4CfmPFdmyPMp/">

Then you can click anchors and at least see that the code enters to that location.replace(url); line.

If anyone can make it work out of the box, I'd be grateful for instructions.

Anyhoo, how is it possible to use $location to achieve a hash add, change or removal without reloading the page?

[Narretz]

This sounds vaguely familiar. Have you searched for similar issues?

[poshest]

Of course I searched for what seemed an hour. I saw many issues about $location but not this particular one. Apologies if I missed its duplicate. Grateful for any help finding it.

…

On 24 January 2018 at 18:25, Martin Staffa ***@***.***> wrote: This sounds vaguely familiar. Have you searched for similar issues? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#16418 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGp-lQFmqk7uZk-3y0PRBpq_VKJniIQKks5tN2eRgaJpZM4Rmya7> .

[poshest]

This was the closest I found, but it's about routes. Not sure it's entirely the same. #1699

…

On 24 January 2018 at 18:29, Joshoooaaah ***@***.***> wrote: Of course I searched for what seemed an hour. I saw many issues about $location but not this particular one. Apologies if I missed its duplicate. Grateful for any help finding it. On 24 January 2018 at 18:25, Martin Staffa ***@***.***> wrote: > This sounds vaguely familiar. Have you searched for similar issues? > > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub > <#16418 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AGp-lQFmqk7uZk-3y0PRBpq_VKJniIQKks5tN2eRgaJpZM4Rmya7> > . >

[Narretz]

Ok. location is notoriously tricky, so I was just double checking before we do duplicate work.
In your specific example, have you tried with $location.hash() ?
This works fine for me: http://plnkr.co/edit/yFD6CUQhs9P2jXPEW3j1?p=preview

[poshest]

Yes, I tried with `$location.hash()`, and same problem. In your new Plunkr the code still ends up on line 6383: `location.replace(url);` which does the reload. I suppose you assumed it "worked" because, as mentioned, iframes don't appear to be reloaded upon `location.replace()`, whereas in a non-iframe scenario it does? Or maybe I'm missing something.

[Narretz]

Well, color me confused. I double checked your original example and I don't get the reload behavior there either - in Firefox and in Chrome.

[poshest]

Yes, well, that's what I said in my original issue. I really should host the problem on a proper page to avoid the Plunkr iframe, but that was just gonna take too long to set up and I'd already sunkr all that time into the Plunkr. Anyway, the point is that location.replace() executes a "navigation" event (reloads the browser). That's a known behaviour. So all you need to prove is that line of code is called under those circumstances. That was my logic while writing the issue anyway.

…

On 25 January 2018 at 11:21, Martin Staffa ***@***.***> wrote: Well, color me confused. I double checked your original example and I don't get the reload behavior there either - in Firefox and in Chrome. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#16418 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGp-lQAHpvOFUhDSQLDn4H37rj-RMAstks5tOFWtgaJpZM4Rmya7> .

[gkalpak]

@poshest, in order to make plnkr work without having to hard-code the base href, you can use the following:

<head>
  <script>document.write('<base href="' + document.location + '" />');</script>
  ...

That said, I cannot replicate the reloading neither in the iframe, nor outside (plnkr has a button on the top-right corner of the preview pane that allows you to open the app without the iframe). Not even on a regular page.

When only the hash changes, location.replace() does not reload the page for me (on Chrome at least).

I'm afraid there is not much we can do without a working reproduction, so I am going to close this for now. Happy to re-open and investigate more once you can provide a working demo.

[poshest]

Thanks for the tip about the full page plunkr! I wish I'd found that before... coulda saved everyone the trouble! The thing is my code base (from where the problem originated) has moved on now, so I'm not easily able to re-create it on my app. :P Sorry to bother you guys! But my new Plunkr skills ensure I'll not do it again! :)

…

On 25 January 2018 at 13:53, George Kalpakas ***@***.***> wrote: @poshest <https://github.com/poshest>, in order to make plnkr work without having to hard-code the base href, you can use the following: <head> <script>document.write('<base href="' + document.location + '" />');</script> ... That said, I cannot replicate the reloading neither in the iframe, nor outside (plnkr has a button on the top-right corner of the preview pane that allows you to open the app without the iframe). Not even on a regular page. When only the hash changes, location.replace() does not reload the page for me (on Chrome at least). I'm afraid there is not much we can do without a working reproduction, so I am going to close this for now. Happy to re-open and investigate more once you can provide a working demo. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#16418 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGp-lVLdleJjkyPMzjJ56N_MPyS2iFyIks5tOHlkgaJpZM4Rmya7> .