Загрузка CSS с помощью Javascript Safari

Question

Я использую этот код ниже для загрузки файлов CSS.

var i, a;
   for(i=0; (a = document.getElementsByTagName("link")[i]); i++){
    if(a.getAttribute("title") == description){
        a.disabled = false;
        if(document.createStyleSheet) {
            try { document.createStyleSheet(a.href); } catch (e) {}
        }
        else {
        alert(a.href);
            var css;
            css         = document.createElement('link');
            css.rel     = 'stylesheet';
            css.type    = 'text/css';
            css.media   = "all";
            css.href    = a.href;
            document.getElementsByTagName("head")[0].appendChild(css);
        }
    }
    else if(a.getAttribute("title") != "default"){a.disabled = true;}
    }

Любая причина, по которой это может не работать в Safari, но работает в IE, Chrome и Firefox ??

Добавлено:

Я использую:

    <script type="text/javascript">
        $(document).ready(function(){dynamicLayout();})
        $(window).resize(function() {dynamicLayout();})
    </script>

для вызова dynamicLayout,

, и при изменении ширины области просмотра (окно браузера Safari) он просто отказывается переключаться на правый CSSфайл.Но прекрасно работает в mozilla / ie / chrome ....

Ооо, не знаю, что здесь происходит.У меня всегда возникают проблемы с jsfiddle по какой-то причине, я не хочу сохранять данные и иногда вылетает из браузера: - / извините за это ..

Надеюсь, это поможет, если не просто продолжать спрашивать, и я предоставлюкак можно больше информации!=]

Answer 1

function dynamicLayout(){
var winWidth = $(window).width();
var winHeight = $(window).height();


changeLayout("default");

if (winWidth < 1148){
    changeLayout("thin");
}
if (winHeight < 810){
    changeLayout("tiny");
}
if ((winWidth < 1148) && (winHeight < 810)){
    changeLayout("thintiny");
}

}

функция changeLayout (описание) { var i, a;

для (i = 0; (a = document.getElementsByTagName ("link") [i]); i ++) { if (a.getAttribute ("title") == описание) {

        a.disabled = false;
        if(document.createStyleSheet) {
            try {document.createStyleSheet(a.href); } catch (e) {}
        }

        else {

            var css;
            css         = document.createElement('link');
            css.rel     = 'stylesheet';
            css.type    = 'text/css';
            css.media   = "all";
            css.href    = a.href;
            document.getElementsByTagName("head")[0].appendChild(css);
        }
    }

    else {
        if( (a.getAttribute("title") != "default") &&
            (a.getAttribute("title") != description)) {

            a.disabled = true;
        }
    }

} }

Код выше отлично работает.

Оказывается, в Safari 5. что-то было ошибка, из-за которой было невозможно вставить CSS способом, описанным выше. Новая версия вышла пару дней назад и теперь работает нормально =] ..

Надеюсь, это кому-нибудь поможет.

Answer 2

Ну, я не уверен, почему он не переключается на правильный CSS-файл, но по моему опыту загрузка / изменение CSS-файлов может иметь много особенностей между браузерами. ИМО, это гораздо лучшее решение для того, что, похоже, вы пытаетесь сделать.

В основном я добавляю класс к телу документа, который говорит, какую ширину / размер / аспект вы хотите использовать на странице. Затем в CSS вы просто создаете несколько стилей для нескольких элементов, которые необходимо изменить в зависимости от размера / аспекта / и т. Д., И добавляете эти стили к классу CSS, который они должны использовать. Тогда вы можете использовать только один файл CSS, и переход будет более плавным.

CSS

.wide #myDiv { width: 1000px; }
.tall #myDiv { width: 400px; }

JavaScript

var updateLayout = function(){
    // logic for determining if the page is tall/wide or whatever your CSS selections criteria is based on
    if (wide) {
        $("body").addClass("wide").removeClass("tall");
    } else {
        $("body").addClass("tall").removeClass("wide");
    }
};

$(document).ready(updateLayout)
$(window).resize(updateLayout)