如何在局部视图中动态加载外部JavaScript?

时间:2012-11-21 21:35:50

标签: javascript html partial

我正在使用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函数?

提前致谢!

2 个答案:

答案 0 :(得分:1)

您可以从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;
    });
}

答案 1 :(得分:0)

我刚做了一个快速测试,看起来当你拨打.html()时,脚本标签就会被删除。所以你应该能够做到:

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