Question

我有一个带有容器的索引页面，我加载了使用ajax请求获取的内容。这些子页面可以包含特别针对它们的js，只需要加载一次。我想实现以下目标：
如果第一次加载子页面，它会加载javascript，但如果是第二次或第n次，则不应加载javascript（因为它已经在内存中）。

我可以通过一些变量来实现它并在执行之前检查它的值，但是我在这里询问是否有适当的，经过测试和逐个使用的方法。我正在使用MVC3和jQuery，如果这很重要的话。

Answer 1

这里有一个小帮手，我正是为了这个目的而使用的：

public static MvcHtmlString Script(this HtmlHelper html, string path)
{
    var filePath = VirtualPathUtility.ToAbsolute(path);
    HttpContextBase context = html.ViewContext.HttpContext;
    // don't add the file if it's already there
    if (context.Items.Contains(filePath))
        return MvcHtmlString.Create("");
    return MvcHtmlString.Create(
        string.Format("<script type=\"text/javascript\" src=\"{0}\"></script>", filePath));
}

用法：

@Html.Script("~/calendar.js")

这可能会在您描述的场景中起作用 - 试用和（希望不是）错误。

Answer 2

您是否尝试过类似YepNope的内容？

这是此类任务的最佳选择之一。

Answer 3

使用jQuery.ajax缓存脚本似乎对我有用。

来源：http://api.jquery.com/jQuery.getScript/

jQuery.cachedScript = function(url, options) {
    // allow user to set any option except for dataType, cache, and url
    options = $.extend(options || {}, {
        dataType: "script",
        cache: true,
        url: url
    });
    // Use $.ajax() since it is more flexible than $.getScript
    // Return the jqXHR object so we can chain callbacks
    return jQuery.ajax(options);
};

// Usage
$.cachedScript("ajax/test.js").done(function(script, textStatus) {
    console.log( textStatus );
});

例如，我有一个表单视图放在DOM中，它使用一些自定义的javascript：

<script type="text/javascript">
    $.cachedScript("/js/my_form_script.js");
</script>
<form action="/Ajax/saveSomething" method="POST">
    ...        
</form>

每次加载表单时，我的控制台都会显示脚本的get请求，但我已确认请求仅在第一次加载时命中服务器。

Answer 4

您必须使用缓存清单。

此处提供更多信息：https://developer.mozilla.org/en/Using_Application_Cache

我们的想法是明确告诉浏览器为您的应用程序缓存哪些文件。

Answer 5

在使用AJAX加载内容页面的JavaScript代码中，使用动态生成的<SCRIPT>元素加载特定于页面的JavaScript。然后，您可以通过为该元素提供唯一ID并尝试在DOM中找到它来检测该元素的存在，以避免将其加载两次。或者，设置全局JavaScript变量。

var scriptLoaded=false;

function loadContent() {
    loadPageWithAJAX();
    if(!scriptLoaded) {
        var script = document.createElement('SCRIPT');
        script.setAttribute("type","text/javascript")
        script.setAttribute("src", 'path/to/page-specific.js');
        document.getElementsByTagName('head')[0].appendChild(script);
        scriptLoaded=true;
    }
}

Answer 6

来自here的答案。

您可以制作一个小脚本来检查页面上是否存在jQuery，并且只有在不存在时才加载它：

// 'load-jquery.js'
window.onload = function () {
  if (window.jQuery === undefined) {
    var script = document.createElement('script');
    script.src = 'path/to/jquery.min.js';
    document.getElementsByTagName('head')[0].appendChild(script); // load jQuery
  }
};

更新：

只要包含文件，就可以使用此功能：

var included_files = new Array();

function include_once(script_filename) {
    if (!in_array(script_filename, included_files)) {
        included_files[included_files.length] = script_filename;
        include_dom(script_filename);
    }
}

function in_array(needle, haystack) {
    for (var i = 0; i < haystack.length; i++) {
        if (haystack[i] == needle) {
            return true;
        }
    }
    return false;

}

如何为可以多次加载的ajax页面只加载一次js

6 个答案: