如何在局部视图中动态加载外部javascript？答案

【问题标题】：how to load external javascript inside partial view dynamically?如何在局部视图中动态加载外部javascript？
【发布时间】：2012-11-10 05:52:15
【问题描述】：

我正在使用 jquery 的 .html() 函数将 html 文件注入到我的应用程序主页的部分 div 中。在注入的部分html页面中，有一个javascript引用，例如script(src='../../javascripts/partialFunctions.js')。 jquery函数和主页面是这样的：

$('.partialDiv').html(htmlResult);

<div>main page</div>
<div class='partialDiv'></div>
<input type='button'>button</input>

当用户点击主应用页面上的特定按钮时，jquery 函数将被调用并将 html 文件注入主页面。

问题是每次注入新的 htm 文件时，浏览器都会加载脚本文件。所以在用户多次点击按钮后会有很多重复的javascript函数。

如何动态执行此操作并避免 javascript 函数的重复？

提前致谢！

【问题讨论】：

为什么不在主页中包含脚本？
当用户单击不同的按钮时，我想将不同的 html 页面和 javascript 文件加载到 partialDiv。所以不想在加载主页面的时候加载所有的js文件。
“想要”并没有真正解释技术推理。如果是关于数据，则将数据包含在部分页面中，并让主脚本在加载时查找它。
由于每个不同的部分html页面都有很多js函数，所以我觉得一次加载所有函数会很慢。
Ummmm...平均 JPG 比大多数 JS 文件大。

标签： javascript html partial

【解决方案1】：

我刚刚做了一个快速测试，当您调用.html() 时，脚本标签似乎被剥离了。所以你应该能够简单地做：

var html = "<html><script></script></html>",
    cleanedHtml = $(html).html();
myEl.html(cleanedHtml);

【讨论】：

【解决方案2】：

您可以从htmlResult 页面中删除脚本标签和引用。然后使用$.getScript('myscript.js') 导入必要的JavaScript 文件。更多信息getScript() here

所以要加载脚本并确保它只加载一次：

var window.foo = false; //Outside the document.ready

$('.partialDiv').html(htmlResult);
if(window.foo == false){
    $.getScript("js/myScript.js", function(data, textStatus, jqxhr){
        console.log('Script loaded');
        window.foo = true;
    });
}

【讨论】：

感谢您的回答。但是即使 js 文件已经加载， $.getScript() 仍然会重新加载 js 文件。无论如何我可以防止这种情况发生吗？
原来问题是由我的 socket.on() 函数引起的。我在javascript文件中定义了socket.on()函数，所以每次加载文件都会给socket添加一个新的事件处理程序。
好吧，如果您仍然需要一次加载文件，您可以声明一个布尔值。 False 加载前，一旦加载，将其更改为 true，因此它不会被加载。 if(bool == false){ $.getScript('script.js'); bool = true;}