2

I am using html5 fullscreen api to make a div fullscreen. Based on user interaction/navigation url changes using window.history.pushState but as soon as I change the URL, page exits the fullscreen mode.

And it is happening on all the sites not just my app.

Steps to reproduce:

  1. Goto http://davidwalsh.name/demo/fullscreen.php (A nice demo)
  2. Then hit Launch fullscreen
  3. Now using chrome/ff console try changing the url using window.history.pushState
  4. Use following code window.history.pushState(window.location.origin, "show", '/myNewPath');

Now you would notice that URL changes but fullscreen mode exits. Am I doing something wrong here? Let me know if you guys need more info.

mplungjan
  • 169,008
  • 28
  • 173
  • 236
ʞɹᴉʞ ǝʌɐp
  • 5,350
  • 8
  • 39
  • 65
  • 1
    I think that is normal browser behaviour. – putvande Dec 30 '13 at 15:11
  • So is there a workaround for this or better way to do it? Because in fullscreen mode user ll navigate to other sections. Does it mean that I have to check if in fullscreen mode do not change url and when exiting the fullscreen mode by some user gesture I should update the history? – ʞɹᴉʞ ǝʌɐp Dec 30 '13 at 15:14
  • Facebook full screen mode gallery manages it somehow –  Mar 05 '14 at 11:22
  • Found bug report for this in chrome https://code.google.com/p/chromium/issues/detail?id=147418 –  Mar 05 '14 at 12:18

2 Answers2

1

I've noticed this issue as well, basically any pushState will kick you out of full screen mode. I've been following this for a while and a fix should be coming soon according this thread:

https://code.google.com/p/chromium/issues/detail?id=138324

It seems they finally amended it, so these two should finally play nice together.

DabaloSe7eN
  • 169
  • 5
0

You have to notice that the browser refresh, so it must exit from fullscreen mode.

If you wanna stay on fullscreen mode, you must stay on the same page, and prevent from exiting / refreshing the page, and use AJAX to manage your navigation and links and load content in the same page.

enguerranws
  • 8,087
  • 8
  • 49
  • 97
  • Well I do use the AJAX to load the new content but to maintain the state of the page I keep updating the URL. So if you mean changing the URL is equal to page refresh then there seems to be no solution to maintain URL/Page state via `history.pushState`. Do we consider history.pushState to refresh the page, my app URL update is like github where page does not refresh. Let me know if I have understood you correctly. Thanks. – ʞɹᴉʞ ǝʌɐp Dec 31 '13 at 00:48
  • Yeah I know what you mean, that's a good question. I think you can't handle it with history.pushState, it will refresh the page, even if you don't want to. See this for alternative methods : http://stackoverflow.com/questions/5942350/how-to-cope-with-refreshing-page-with-js-history-api-pushstate – enguerranws Dec 31 '13 at 09:47
  • Check also history.replaceState(), I think that's what you're looking for. http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/ – enguerranws Dec 31 '13 at 09:50
  • `replaceState` also exits full screen –  Mar 05 '14 at 11:21
  • I saw that, I guess there is no way to achieve that ? – enguerranws Mar 05 '14 at 13:06