2012-02-14 13 views
1

我有索引页与容器用AJAX请求获得我加载内容Ajax页面。这些子页面可以包含特定于js的js,这些js只需要加载一次。我想实现以下目标:
如果子页面加载它加载的JavaScript,但如果是第二次或第n个时间,然后JavaScript的不应该被加载(因为它已经在内存中)在第一时间。如何处理加载JS只有一次可以装入多次

我能做到这一点与一些变量并在执行前检查它的价值,但我在这里问是否有这样做的正确,测试和使用,通过一对多的方式。如果这很重要,我正在使用MVC3和jQuery。

回答

-2

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 
    } 
}; 

UPDATE:

您可以使用此功能时您包含文件:

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; 

} 
+1

这只会检查jQuery。他需要知道任何JavaScript文件 – Henesnarfel 2012-02-14 14:36:36

+0

如果我是正确的,这将检查jQuery。加载jQuery是因为我在加载页面时加载它。当我加载子页面时,我加载了一些其他内容,也使用jQuery(但不一定)。我想检查* * js是否加载。 – 2012-02-14 14:37:06

+0

我不确定,但某些浏览器可能不接受将元素添加到头部。 – rcdmk 2012-02-14 14:39:39

0

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

你试过类似YepNope的东西吗?

这是对这种类型的任务的最好的事情之一。

3

这里有一个小帮手,我使用的正是这个目的:

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

这可能工作的情况下,你描述一种享受 - 试验和(希望不是)错误。

1

用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> 

每个窗体被加载时,我的控制台显示脚本的获取请求,但我已经确认请求仅在第一次加载时遇到服务器。