Как сгенерировать и добавить случайную строку, используя jquery

Общие положения

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

Особенности

Мне нужно ссылаться на файл CSS, который живет на CDN. К сожалению, CDN изменяет URL этого CSS файла каждый раз, когда файл обновляется. Поэтому я не могу просто ссылаться на статический URL.

Получается, что если вы добавите строку в конец URL-адреса, который ранее не видел CDN, он вернет самую последнюю версию файла. Bogus, чтобы быть уверенным.

например.

<link href="#" onclick="location.href='http://example.com/style.css?randomString-neverSeenBefore'; return false;">

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

Что у меня до сих пор,

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

бит кода # 1:

        // this guy is a random number generator that i found
        jQuery.extend({
        random: function(X) {
            return Math.floor(X * (Math.random() % 1));
        },
        randomBetween: function(MinV, MaxV) {
          return MinV + jQuery.random(MaxV - MinV + 1);
        }
    });


    // using above plugin, creates 20 random numbers between 10 and 99
    // and then appends that 40 digit number to a paragraph element
    for (i = 0; i < 20; i++) {
        $('p').text(    
            $('p').text() + ($.randomBetween(10, 99) )
            );
    }

бит кода # 2:

    // this fellow creates a link to the style sheet
    // after the page has loaded
    var link = $("<link>");
    link.attr({
            type: 'text/css',
            rel: 'stylesheet',
            href: 'http://example.com/style.css'
    });
    $("head").append( link );

Я предполагаю, что требуется "бит кода №2": моя презумпция заключается в том, что я просто добавил случайное число в конец существующего атрибута "href", ничего не произойдет. т.е. файл CSS не будет перезагружен.

Спасибо миллион за вашу помощь!:)

Джон

Ответ 1

Держите его простым, примените текущую временную метку в миллисекундах к URL-адресу:

// this fellow creates a link to the style sheet
// after the page has loaded
var link = $("<link>");
link.attr({
        type: 'text/css',
        rel: 'stylesheet',
        href: 'http://example.com/style.css?' + (new Date).getTime()
});
$("head").append( link );

Обратите внимание, что это действительно плохая идея, если вы не собираетесь менять таблицу стилей, просто замените URL-адрес вручную в файлах. Существуют средства для этой цели (sed в системах на базе Linux)

Ответ 2

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

Чтобы ответить, как выполнить его со случайной строкой, вы можете попробовать следующее:

$('<link/>').attr({
                   type: 'text/css',
                   rel: 'stylesheet',
                   href: 'http://example.com/style.css?' + randString(4)
}).appendTo('head');

Здесь простая функция генератора случайных строк:

/**
 * Function generates a random string for use in unique IDs, etc
 *
 * @param <int> n - The length of the string
 */
function randString(n)
{
    if(!n)
    {
        n = 5;
    }

    var text = '';
    var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

    for(var i=0; i < n; i++)
    {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    }

    return text;
}

Ответ 3

Вы можете получить только часть даты, например:

var d = new Date;

// this string will change once a day for the same user
var rnd_str_day = d.getFullYear() + '_' + d.getMonth() + '_' + d.getDay();
href= 'http://example.com/style.css?' + rnd_str_day;

// this string will change once an hour
var rnd_str_hour = d.getFullYear() + '_' + d.getMonth() + '_' + d.getDay() + '_' + d.getHours();
href= 'http://example.com/style.css?' + rnd_str_hour;

И поэтому css будет отключен один раз в день или час, в зависимости от ваших запросов.