Как обработать загрузку JS только один раз для страницы AJAX, которые могут быть загружены несколько раз - PullRequest
1 голос
/ 14 февраля 2012

У меня есть страница индекса с контейнером, в который я загружаю контент, полученный с помощью запросов ajax. Эти подстраницы могут содержать специфичные для них js, которые необходимо загрузить только один раз. Я хотел бы добиться следующего:
Если подстраница загружается в первый раз, она загружает javascript, но если это второй или n-й раз, то javascript не должен загружаться (потому что он уже находится в памяти).

Я мог бы достичь этого с помощью некоторой переменной и проверить ее значение перед выполнением, но я спрашиваю здесь, существует ли подходящий, проверенный и используемый многими способами способ сделать это. Я использую MVC3 и jQuery, если это важно.

Ответы [ 6 ]

3 голосов
/ 14 февраля 2012

Вот маленький помощник, который я использую именно для этой цели:

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 голос
/ 27 апреля 2013

Кэширование скрипта с помощью 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 для скрипта, но я подтвердил, что запрос попадает только на сервер при первой загрузке.

1 голос
/ 14 февраля 2012

Вы пробовали что-то вроде YepNope ?

Это одна из лучших вещей для этого типа задач.

0 голосов
/ 14 февраля 2012

В коде JavaScript, который загружает страницы содержимого с помощью AJAX, загрузите JavaScript для конкретной страницы, используя динамически генерируемый элемент <SCRIPT>.Затем вы можете обнаружить присутствие этого элемента, присвоив ему уникальный идентификатор и попытавшись найти его в 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;
    }
}
0 голосов
/ 14 февраля 2012

Вы должны использовать манифест кэша.

Больше информации здесь: https://developer.mozilla.org/en/Using_Application_Cache

Идея состоит в том, чтобы явно указать браузеру, какие файлы следует кэшировать для вашего приложения.

0 голосов
/ 14 февраля 2012

Ответ от здесь .

Вы можете сделать небольшой скрипт, чтобы проверить, присутствует ли 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;

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...