move fullscreen page change tip into the readme

index.html

@@ -131,11 +131,6 @@ <h1>screenfull<span>.js</span></h1>
 			</section>
 			<input autofocus placeholder="Keyboard test">
 			<hr>
-			<section>
-				<p>How to open external pages while in fullscreen</p>
-				<button id="iframe">Click when in fullscreen</button>
-			</section>
-			<hr>
 			<section>
 				<p>Click the image to make it fullscreen</p>
 				<img width="500" height="206" id="demo-img" src="https://sindresorhus.com/img/slideshow/4.jpg">
@@ -181,25 +176,6 @@ <h1>screenfull<span>.js</span></h1>
 				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;
 

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