Go to .
Most websites consist of multiple pages. When you browse the site, you navigate from page to page, and with each page load you end up unloading and reloading much of the logic. What if you want to have some part of your site experience to persist from page to page without having to be re-initialized with each page load?
Take Facebook for example. There are persistent chats that are docked to the bottom of the window: you navigate from newsfeed to profile to settings without the chat ever going away. Facebook has accomplished this by architecting their site as a single-page app: when you click from the newsfeed to a friend's profile, JavaScript does a history.pushState() to change the URL of the current page, and replaces the page content via Ajax. This allows the chat to remain persistent, even though it seems like you are navigating to different pages on the site.
What if you want to add persistent component across pages of an existing site? Well, you can't take Facebook's approach without fundamentally re-architecting your site to be able to load all content from other pages via Ajax. On many sites this is impossible because they may have scripts (e.g. ads) that depend on document.write() which can't execute after the page has been initially loaded.
This proof of concept demonstrates another way.
Each page in this demo includes the same WrappedWindow code. When you activate the wrapped window, a location.replace() takes you to window-wrapper.html with the previous URL supplied as a query argument. On that page, an iframe is embedded in the page filling the entire window, and the iframe is loaded with the URL from the originating page. Once this iframe loads, history.replaceState() is invoked to rewrite the URL to be the same as the URL in the iframe, which is the original URL from which the functionality was invoked. There is a slight flicker in the URL bar when this process happns, but for subsequent page loads in the wrapped window, it seems like you are browsing the site normally. The iframe window also updates the parent window's document.title to match. When you navigate to another page within the iframe, it again updates the parent window's title and rewrites the URL.
In the parent window (WindowWrapper), however, there is a bar that is positioned at the bottom of the window. This bar is given a random background color when the parent page loads. As you navigate around the site, you should see that the bar's color does not change. The marquee (yay!) in the bar also doesn't reset with each page load because the parent window remains intact when the iframe is navigated.
Interestingly, when navigating in the iframe window, the browser will store history entries and allow the window to be navigated with the browser's back and forward buttons leaving the parent window (the window wrapper) intact. At least, that's how it's supposed to work. Browsers seem to have different degrees of support for this.
iframe window would remain unchanged.What do you think? Thoughts on how the browser issues mentioned above can be fixed? Feel free to fork the repo GitHub repo and open a pull request!