Как загрузить файл CSS на основе URL или клиента

Question

Как загрузить файл CSS на основе URL или клиента

У меня есть два CSS-файла в моем сенсорном приложении Sencha. Позвоним им A.css а также B.css, Основываясь на URL, я хочу, чтобы приложение загружало разные CSS.

Допустим, URL-адрес 1 www.website.com/#1 так что для этого я бы хотел загрузить A.css, аналогично URL 2 www.website.com/#2 так что для этого я бы хотел загрузить B.css

Можно ли загружать CSS динамически на основе URL?

1

html css dynamic stylesheet sencha-touch-2.3

Источник

user1787314 21 июл '14 в 07:47

4 ответа

Другие вопросы по тегам html css dynamic stylesheet sencha-touch-2.3

user3187056 21 июл '14 в 08:30 2014-07-21 08:30 · Answer 1 · 2014-07-21 08:30

Вы можете использовать Javascript Regex для этого. Очень простой метод

    // For www.website.com/#1
    if(/www.website.com\/#1/.test(window.location.href)){
        /* Your Code Here For Loading Css */
    }

    // For www.website.com/#2
    if(/www.website.com\/#1/.test(window.location.href)){
        /* Your Code Here For Loading Css */
    }

Надеюсь это поможет!!!

2

Источник

user3187056 21 июл '14 в 08:30

user1876473 21 июл '14 в 08:10 2014-07-21 08:10 · Answer 2 · 2014-07-21 08:10

Я предполагаю, что у вас есть один шаблон для 2 URL. Загрузка CSS с использованием javascript - довольно плохая практика, потому что она медленная и дает пользователю плохой опыт, поскольку изначально ничего не стилизовано.

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

$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'your    stylesheet url') );

А для самого URL просто используйте JS window.location следующим образом:

if (window.location == "#1url") {
    // load A.css using the append function above
}

user2024835 21 июл '14 в 08:14 2014-07-21 08:14 · Answer 3 · 2014-07-21 08:14

Получить значение хеш-тега из URL, а затем в зависимости от значения изменить ссылку для CSS

получить значение хеш-тега

$url = "www.website.com/#1";
$params = parse_url($url);

$value = $params['fragment'];

это даст вам значение хеш-тега, а затем в зависимости от значения ссылки файл CSS в заголовке

<?php if($value == 1){ ?>
<link href="A.css" rel="stylesheet" type="text/css" />
<?php } else{ ?>
<link href="B.css" rel="stylesheet" type="text/css" />
<?php } ?>

user562282 21 июл '14 в 08:08 2014-07-21 08:08 · Answer 4 · 2014-07-21 08:08

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

if (window.location == "http://www.website.com/#1") {
     LoadCSS("A.css")
}
else if(window.location == "http://www.website.com/#2") {
     LoadCSS("B.css")
}

function LoadCSS(filename) {
     var fileref = document.createElement("link");
     fileref.setAttribute("rel", "stylesheet");
     fileref.setAttribute("type", "text/css");
     fileref.setAttribute("href", filename);
}