Can you execute contained JavaScript in browsers?

I want to be able to run JavaScript on my webpage and guarantee that it can be stopped cleanly without causing problems. You could think of it as running JavaScript as if it was contained in an iFrame but allow it to modify and interact with the root DOM. That way if I remove the iFrame, the JS dies.

Use Case/Justification

I want to turn any webpage into a weird mutant SPA. That means taking the traditional HTML, CSS, and JavaScript and then handling page switching myself. To propperly switch pages avoiding artifacts from previously executing JS I'd need to make sure one page's JS doesn't interact with the next page's JS. Ideally, to switch a page it would follow this general formula:

1. Load HTML and CSS with a framework like Ember.js
2. Load all linked JavaScript in a contained environment but with the ability to modify the root DOM
3. When the user clicks a link, stop all running JavaScript and return to step 1.

My Thoughts

I've run tests actually loading a webpage in a full-screen iframe (like this) which achieves the level of containment that I want when executing the JavaScript, but it has serious performance penalties. I want the contained JavaScript, with a minimal performance penalty.

One thought I had was after downloading JavaScript, replacing the actual code dynamically. I would change the code to instead of referencing the Window, referencing the Window.parent.

I'm not attached to the idea of using iFrames, but it just seems like it is the closest thing to a "container" that you can get in JavaScript/the browser. I'd love alternatives.

Related?

http://ift.tt/1LApY2f

instantclick.io/

shadow DOM?

Mini-Followup:

Would it be feasible to build an app like this which would allow for proper handling of both JS life cycles and page switches?