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

How to handle loading js only once for ajax page that can be loaded multiple times

本文关键字：加载 处理 js 一次 ajax      更新时间：2023-09-26

我有一个带有容器的索引页面，我将通过ajax请求获得的内容加载到该容器中。这些子页面可以包含特定于它们的js，只需要加载一次。我希望实现以下目标：
如果子页面是第一次加载的，它会加载javascript，但如果是第二次或第n次加载，则不应加载javascript（因为它已经在内存中了）。

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

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

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")

在你描述的场景中，这可能是一种治疗——尝试和（希望不是）错误。

你试过YepNope这样的东西吗？

对于这类任务来说，这是最好的事情之一。

用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请求，但我已经确认该请求只在第一次加载时到达服务器。

您必须使用缓存清单。

更多信息，请点击此处：https://developer.mozilla.org/en/Using_Application_Cache

这个想法是明确地告诉浏览器要为应用程序缓存哪些文件。

在使用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;
    }
}

从这里回答。

您可以制作一个小脚本来检查页面上是否存在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;
}
相关文章：