CSS не применяется в букмарклет - PullRequest
Новая
       33

CSS не применяется в букмарклет

1 голос
/ 21 июля 2011

Я создаю простой букмарклет (никогда раньше этого не делал), и хотя скрипт выполняется просто отлично (сейчас ничего не происходит), таблица стилей CSS, которая встраивается, не применяется к HTML.

Ссылка для активации выглядит следующим образом (домен изменен): 

<a href="javascript:(function(){document.head.appendChild(document.createElement('script')).src='http://www.mydomain.co.uk/cloudlr/app/js/cloudlr.js?rand=' + Math.floor(Math.random()*99999);})();">Do this</a>

Затем вызывается скрипт: 

if (typeof jQuery == 'undefined') {

    appendjQuery();

} else {

    jsVersion = $().jquery;
    versionArray = jsVersion.split('.');

    if (versionArray[1] < 6) {

        appendjQuery();

    } else {

        runthis();

    }
}

function appendCSS() {

    var cloudlrCSS = document.createElement('link');
    cloudlrCSS.type = 'text/css';
    cloudlrCSS.href = 'http://www.mydomain.co.uk/cloudlr/app/css/screen.css';
    cloudlrCSS.media = 'all';
    document.head.appendChild(cloudlrCSS);

}

function appendjQuery() {

    var cloudlrJS = document.createElement('script');
    cloudlrJS.type = 'text/javascript';
    cloudlrJS.onload = runthis;
    cloudlrJS.onreadystatechange = function () {

        if (this.readyState == 'loaded' || this.readyState == 'complete') {
            runthis();
        }

    }
    cloudlrJS.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js';
    document.head.appendChild(cloudlrJS);
}

function runthis() {

    appendCSS();

    $(document).ready(function() {

        $("img").each(function() {
            var $this = $(this);
            var imageWidth = $(this).width();
                $(this).before(imageWidth);
        });

        var cloudlrOverlay = '<div id="cloudlr-content">This is some content.</div><div id="cloudlr-overlay"></div>';

        $("body").append(cloudlrOverlay);

    });


}

Надеюсь, это все довольно просто.

Сценарии выполняются очень хорошо (jQuery), но CSS не применяется.Если я просматриваю «сгенерированный источник», я вижу, что CSS вставлен нормально, и ссылка на файл работает.Поэтому я не уверен, что происходит.

Я новичок в этом и приветствовал бы любые дополнительные рекомендации по передовому опыту, а также решение проблемы.

Большое спасибо, Майкл.

1 Ответ

1 голос
/ 21 июля 2011 
$("img").each(function(i,n) {
    var $this = $(n);//don't know why this is here but hey
    var imageWidth = $(n).width();
        $(n).before(imageWidth);
});

это распространенная ошибка ... Я думаю, что это может помочь вам

...