你可以在浏览器中执行包含的 JavaScript 吗？

Question

我希望能够在我的网页上运行 JavaScript，并保证可以干净地停止它而不会造成问题。您可以将其视为运行 JavaScript，就好像它包含在 iFrame 中一样，但允许它修改并与根 DOM 交互。这样，如果我删除 iFrame，JS 就会死掉。

用例/理由

我想把任何网页变成一个奇怪的变异 SPA。这意味着采用传统的 HTML、CSS 和 JavaScript，然后自己处理页面切换。为了正确切换页面，避免以前执行的 JS 产生的工件，我需要确保一个页面的 JS 不与下一页的 JS 交互。理想情况下，要切换页面，它会遵循以下通用公式：

1. 使用 Ember.js 等框架加载 HTML 和 CSS
2. 在包含的环境中加载所有链接的 JavaScript，但能够修改根 DOM
3. 当用户点击一个链接时，停止所有正在运行的 JavaScript 并返回到第 1 步。

我的想法

我已经运行测试，实际上在全屏 iframe (like this) 中加载网页，这达到了我在执行 JavaScript 时想要的包含级别，但它有严重的性能损失。我想要包含的 JavaScript，性能损失最小。

我的一个想法是在下载 JavaScript 之后动态替换实际代码。我会将代码更改为引用Window.parent，而不是引用Window。

我不喜欢使用 iFrames 的想法，但它似乎是你可以在 JavaScript/浏览器中获得的最接近“容器”的东西。我喜欢其他选择。

相关？

github.com/codeschool/javascript-sandbox

instantclick.io/

影子 DOM?

迷你跟进：

构建这样的应用程序是否可行，可以正确处理 JS 生命周期和页面切换？

Answer 1

脚本一旦加载就无法卸载。但是你可以在一个对象中封装一些脚本，然后创建或销毁这个对象。

例如：

var Robot = function(){
    return{
        sayHello : function(){
            alert("Hello!");
        },
        doSomethingElse : function(){
            alert("I'm doing something else");
        }
    }
}

robot = new Robot();

robot.sayHello(); // Actually alerts "Hello!"

robot = null; // the robot is destroyed.

在您的情况下，如果您通过 ajax 加载脚本，请在对象中说这段脚本：

{
    sayHello : function(){
        alert("Hello!");
    },
    doSomethingElse : function(){
        alert("I'm doing something else");
    }
}

然后您可以将此脚本封装在一个函数中：

var Robot = null,
    robot = null;

$.get('scriptURL', function(ajaxedScriptObject){
    Robot = function(){ return ajaxedScriptObject; };
    createRobot();
})

function createRobot(){
    robot = new Robot();
    sayHello();
    destroyRobot();
}

function sayHello(){
    robot.sayHello(); // Should alert "Hello!" :)
}

function destroyRobot(){
    robot = null;
}