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?
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
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.
iframewindow 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!