title: How to make a whole website run under fullscreen with screenfull.js?
body: <p>I am using the screenfull.js library and I have a button that in which I attach the event for the click to go fullscreen. I can enter fullscreen mode but then as soon as I click on something, the fullscreen is exit. </p>
  
  <p>I've been told that the fullscreen api is meant to be used on a single page. There are ways to work around this by using this iframe trick <a href="https://github.com/sindresorhus/screenfull.js/blob/gh-pages/index.html#L202-L219" rel="nofollow">https://github.com/sindresorhus/screenfull.js/blob/gh-pages/index.html#L202-L219</a>.</p>
  
  <pre><code>// 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', 'http://bbc.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%';
        $('#container').prepend(iframe);
        document.body.style.overflow = 'hidden';
  })
  </code></pre>
  
  <p>However, I don't get it the trick with the iframe. Sorry I am a noob in JS. I have lots of links/request inside my app and what I want to make fullscreen is my whole app. With the iframe trick I would need to make each button use the iframe? Is there a workaround? </p>
  
  <p>Thanks a lot in advance</p>