cfebs/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Instructions

Download server.js and run node server.js (tested with node v6.10.1)
Visit http://localhost:3000/

  
## server.js
const http = require('http');
const url = require('url');
const port = 3000;

const getIndexContent = () => {
    return `<html>
        <head></head>
        <body>
            <div id="first">
                <h3 id="loading">Loading</h3>
                <p>The initial page includes a iframe with the src <code>/localhost:3000?sleep=5</code>.</p>
                <p>This simulates a slow child page</p>
                <p>The site will reveal the rest of itself after the <code>window.onload</code> event is fired</p>
            </div>
            <div id="rest" style="display:none">
                <h1>My website!</h1>
                <p>Do not rely on iframes loading from <strong>any</strong> 3rd parties before revealing your site.</p>
                <p>It is like you are waiting on 2 websites to load before giving your users content.</p>
                <p>All the resources must load from child iframes before the parent window load event is fired</p>
                <p>Consider inserting the iframe via javascript or change the <code>window.onload</code> handler!</p>
                <iframe src="/localhost:3000?sleep=5"></iframe>
            </div>
            <script>
                var i = 0;
                var dots = '...'
                setInterval(function() {
                    i = i >= 3 ? 0 : i;
                    document.querySelector('#loading').innerHTML = 'Loading ' + dots.substr(i, 3);
                    i++;
                }, 500);
                window.onload = function() {
                    console.log('Done loading everything, moving on');
                    document.querySelector('#first').style.cssText = 'display: none';
                    document.querySelector('#rest').style.cssText = 'display: block';
                };
            </script>
        </body>
    </html>`;
}

const requestHandler = (request, response) => {
    console.log('Req', request.url);
    const parts = url.parse(request.url, true);
    const query = parts.query || {};
    if (query.sleep) {
        const sleepTime = parseInt(query.sleep, 10);
        setTimeout(() => {
            response.end(`Hello I rendered after ${sleepTime} seconds`);
        }, sleepTime * 1000);
        return;
    }

    response.end(getIndexContent())
};

const server = http.createServer(requestHandler)

server.listen(port, (err) => {
  if (err) {
    return console.log('something bad happened', err)
  }

  console.log(`server is listening on ${port}`)
})
	const http = require('http');
	const url = require('url');
	const port = 3000;

	const getIndexContent = () => {
	return `<html>
	<head></head>
	<body>
	<div id="first">
	<h3 id="loading">Loading</h3>
	<p>The initial page includes a iframe with the src <code>/localhost:3000?sleep=5</code>.</p>
	<p>This simulates a slow child page</p>
	<p>The site will reveal the rest of itself after the <code>window.onload</code> event is fired</p>
	</div>
	<div id="rest" style="display:none">
	<h1>My website!</h1>
	<p>Do not rely on iframes loading from <strong>any</strong> 3rd parties before revealing your site.</p>
	<p>It is like you are waiting on 2 websites to load before giving your users content.</p>
	<p>All the resources must load from child iframes before the parent window load event is fired</p>
	<p>Consider inserting the iframe via javascript or change the <code>window.onload</code> handler!</p>
	<iframe src="/localhost:3000?sleep=5"></iframe>
	</div>
	<script>
	var i = 0;
	var dots = '...'
	setInterval(function() {
	i = i >= 3 ? 0 : i;
	document.querySelector('#loading').innerHTML = 'Loading ' + dots.substr(i, 3);
	i++;
	}, 500);
	window.onload = function() {
	console.log('Done loading everything, moving on');
	document.querySelector('#first').style.cssText = 'display: none';
	document.querySelector('#rest').style.cssText = 'display: block';
	};
	</script>
	</body>
	</html>`;
	}

	const requestHandler = (request, response) => {
	console.log('Req', request.url);
	const parts = url.parse(request.url, true);
	const query = parts.query \|\| {};
	if (query.sleep) {
	const sleepTime = parseInt(query.sleep, 10);
	setTimeout(() => {
	response.end(`Hello I rendered after ${sleepTime} seconds`);
	}, sleepTime * 1000);
	return;
	}

	response.end(getIndexContent())
	};

	const server = http.createServer(requestHandler)

	server.listen(port, (err) => {
	if (err) {
	return console.log('something bad happened', err)
	}

	console.log(`server is listening on ${port}`)
	})