Я создаю простой букмарклет (никогда не делал этого раньше), и хотя скрипт выполняется просто отлично (сейчас не так много), таблица стилей CSS, которая внедряется, не распространяется на HTML.CSS не применяется в закладке
Ссылка активации выглядит следующим образом (домен изменен):
<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 был вставлен отлично, и ссылка на файл работает. Поэтому я не уверен, что происходит.
Я новичок в этом и приветствую любые дополнительные рекомендации по лучшим практикам, а также решение проблемы.
Большое спасибо, Michael.
Какой браузер это? –
вы можете попробовать установить «cloudlrCSS.rel = 'stylesheet»; ' –
Грег - это на него отвечало! Теперь он работает. Кто бы мог подумать? Возможно, это был браузер. Я использовал Firefox 5. Большое вам спасибо. Напишите это как вопрос, и я дам вам очки. Береги себя. –