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/)