diff --git a/index.html b/index.html index f8d8626..f150bf5 100644 --- a/index.html +++ b/index.html @@ -131,11 +131,6 @@

screenfull.js


-
-

How to open external pages while in fullscreen

- -
-

Click the image to make it fullscreen

@@ -181,25 +176,6 @@

screenfull.js

screenfull.toggle(this); }); - // a little hack to be able to switch pages while in fullscreen. - // we basically just creates a seamless iframe and navigate in that instead. - $('#iframe').click(function () { - // We create an iframe and fill the window with it - var iframe = document.createElement('iframe') - iframe.setAttribute('id', 'external-iframe'); - iframe.setAttribute('src', 'https://sindresorhus.com/hi'); - iframe.setAttribute('frameborder', 'no'); - iframe.style.position = 'absolute'; - iframe.style.top = '0'; - iframe.style.right = '0'; - iframe.style.bottom = '0'; - iframe.style.left = '0'; - iframe.style.width = '100%'; - iframe.style.height = '100%'; - $('#container').prepend(iframe); - document.body.style.overflow = 'hidden'; - }); - function fullscreenchange() { var elem = screenfull.element; diff --git a/readme.md b/readme.md index c1098a1..8000608 100644 --- a/readme.md +++ b/readme.md @@ -202,6 +202,33 @@ $(document).on(screenfull.raw.fullscreenchange, function () { ``` +## FAQ + +### How can I navigate to a new page when fullscreen? + +That's not supported by browsers for security reasons. There is, however, a dirty workaround. Create a seamless iframe that fills the screen and navigate to the page in that instead. + +```js +$('#new-page-btn').click(function () { + var iframe = document.createElement('iframe') + + iframe.setAttribute('id', 'external-iframe'); + iframe.setAttribute('src', 'http://new-page-website.com'); + iframe.setAttribute('frameborder', 'no'); + iframe.style.position = 'absolute'; + iframe.style.top = '0'; + iframe.style.right = '0'; + iframe.style.bottom = '0'; + iframe.style.left = '0'; + iframe.style.width = '100%'; + iframe.style.height = '100%'; + + $(document.body).prepend(iframe); + document.body.style.overflow = 'hidden'; +}); +``` + + ## Resources - [Using the Fullscreen API in web browsers](http://hacks.mozilla.org/2012/01/using-the-fullscreen-api-in-web-browsers/)