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:
Goto http://davidwalsh.name/demo/fullscreen.php (A nice demo)
Then hit Launch fullscreen
Now using chrome/ff console try changing the url using window.history.pushState
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.
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.
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.
Related
I got a specific page that I want in full screen mode like if you press F11.
How can I fix this page to get in the full screen mode?
The page contains a full screen slide show.
Thanks for your help.
****** UPDATE ******
I figured out to create a button that goes to the full screen mode.
Still I would like to know if it's possible to load full screen instantly when the page is entered.
JS has an experimental fullscreen API that you can use by calling:
elem.requestFullscreen();
There are vendor-specific functions that are necessary in some cases.
You could also use a library like screenfull.js to abstract the complexity away for you
Update: It's not possible to go fullscreen automatically upon load. If you try to use the fullscreen API calls without them being synchronous reactions to user input (click, keypress, etc) they will fail.
I tried with different options for automatically making a page full screen using javascript
I tried with the window.open("index.html","","fullscreen=yes,location=no, cursor=none");
I tried with the Native FullScreen JavaScript API- It only works on a button click or any other events , but I need to make the page automatically open on fullscreen.
...I need to make the page automatically open on fullscreen
You can't, and for good reason. That's why the fullscreen API (and window.open, typically) only works in response to a user event. It's by design to prevent web pages from hijacking the user's workspace.
How is this, conceptually, achieved?
e.g. access https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna (a google chrome extension download) and instead of installing it, close with the dialog X button.
I noticed that url changed, but content was not changed (well: the dialog was closed, but the rest of the page was not changed).
Question: How is that done? AFAIK when the url is changed, the page changes.
I think this is an HTML5 feature. It support your javascript messing with your navigation history
An article I was reading yesterday:
http://diveintohtml5.info/history.html
Thanks for reading my question.
I saw Gizmodo & Lifehacker has this feature.
Take a look at this http://lifehacker.com/
When you click link in right sidebar, example (http://lifehacker.com/5835630/apple-launches-itunes-match-beta-for-developers). The address bar show "http://lifehacker.com/5835630/apple-launches-itunes-match-beta-for-developers", it means new page are opened. But contents of current page is not changed, like AJAX load. But the different is: when using AJAX load, we will make request to new page, but address bar is still current URL. And lifehacker.com's address bar shows destination URL, not current URL.
I tried to inspect request, and saw Lifehacker.com make POST request to opened page (http://lifehacker.com/5835630/apple-launches-itunes-match-beta-for-developers), and then render contents, like AJAX load does, but my problem is Why their addres shows new URL instead of URL (or hashbang URL like http://lifehacker.com/#something).
I tested in different browsers, and this feature only work with Chrome & FF, not Opera and IE, so I think is features of Chrome & FF, is it right ?
Thankyou
This is achieved through the HTML5 history API or older hacks that included an iFrame..
See this article on information on HTMl5 History:
http://diveintohtml5.ep.io/history.html
See this demo for the code in question.
You may also want to look at the PJax library that provides this functionality (through the above means)
A site that links to mine keeps my site in a frame, so I added the following JavaScript to my page:
if (window.top.location != window.location) {
window.top.location = window.location
}
Now if I get to my site via the offending site, my site successfully breaks out of the frame. But the back button breaks! The back button sends the user to the framed version of my site, which immediately breaks out again, returning him to where he was trying to leave! Is there a simple way to fix this?
window.top.location.replace(window.location);
The replace method is specifically for this purpose. It replaces the current item in the history state with the new destination so that the back button won't go through the destination you don't want.
jfriend00's answer is indeed correct. Using the window.location.replace method will work without affecting the back button.
However, I'd just like to note that whenever you want to stop a page from being framed, you should do more than just that! There are a couple methods of preventing a simple script like that from breaking out of the frame, which work in many modern browsers. Perhaps you can disable the page, display a message with a link to the full page, something like that. You could also use the X-Frame-Options response header that tells the browser not to display the page in a frame. If you don't take some of these measures, your site could be clickjacked.
Another solution is to open your site in a new window leaving a friendly message in the iframed site:
if (parent.frames.length)
{ window.open("mySite.htm", "MySite");
location.href= "framedMessage.htm";
}
Where framedMessage.htm contains some friendly/warning message.