Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > динамически менять подключаемый js и css файлы

Автор: inohodec 11.9.2012, 12:23

Всем привет

Нужно динамически менять подключаемый js и css файлы.
Т.е. у меня на страничке есть возможность переключить язык с RTL to LTR и обратно

И вот я в начале файла проверяю определенный флаг и на основании этого выбираю нужный js/css
Делаю я это таким образом:

Код


if (filetype=="js"){
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)

Это работает, но есть проблема, html загружается быстрее чем js/css.
Поэтому вначале на долю секунды показывается голый html, т.е. вся структура файла но без применения css и js
Затем браузер находит нужные файлы и разукрашивает страницу соответственно

Но вот эта демонстрация голой структуры совсем не к месту, может кто нибудь знает как побороть

И еще маленький вопрос в догонку, по теме, могу ли я загружать нужные файл только один раз на одной странице а потом уже использовать этот файл на всех остальных страницах, как константу какую нибудь

Спасибо

Автор: ksnk 11.9.2012, 13:35

Цитата(inohodec @ 11.9.2012, 12:23

)

Но вот эта демонстрация голой структуры совсем не к месту, может кто нибудь знает как побороть

Например голую структуру нужно загружать после css и js. В таком-же javascript стиле.
Основная страница будет чем-то вроде "подождите идет загрузка."
Правда поисковикам такое обращение не понравится.

Можно менять страницу на сервере, с помощью php и кук.

Автор: inohodec 11.9.2012, 15:20

Спасибо, я добавил весь html в javascript и всё это засунул в div, думал что сработает, так как вначале искал/загружал файл а потом заполнайл div. Но не тут то было, всё равно вылазит html...

Сервера у меня нет, тат как вся аппликация сидит на клиенте, это для смартфонов на phonegap.

Короче после долгих размышлений думаю сделать две версии файлов, типа rtl.main.html и ltr.main.html в них уже прописать родные для них js/css

Автор: lomaster 11.9.2012, 15:38

Цитата

Это работает, но есть проблема, html загружается быстрее чем js/css.

А где прописан это скрипт?

Автор: inohodec 11.9.2012, 15:58

Я сделал <div id="init"></>
Затем сделал <body onload="init(); ">
В init() я сначала добавляю нужный скрипт, а потом делаю document.getElementById("init");
И в этот элемент через innerHTML добавляю весь html

Автор: ksnk 11.9.2012, 16:06

Цитата(inohodec @ 11.9.2012, 12:23

)

И еще маленький вопрос в догонку, по теме, могу ли я загружать нужные файл только один раз на одной странице а потом уже использовать этот файл на всех остальных страницах, как константу какую нибудь

Это называется кэширование. Кэширование производится максимально прозрачно для разработчика. Клиентский броузер кэширует файлы с одним и тем-же URI. Сам, если его специально не уговаривать так не делать. Перед загрузкой файла, обычно, на сервер посылается запрос "а не поменялся ли файл с таким именем?" Если сервер отвечает, что нет - берется версия из кэша.
Можно специальными заголовками при отдаче файла уговорить броузер не запрашивать сервер об измененных версиях, в течении какого-то времени. Так загрузка еще более сильно ускоряется. Однако при изменении контента на сервере возникнет проблема изменения кэша броузера клиента.

Цитата(inohodec @ 11.9.2012, 15:20

)

вначале искал/загружал файл а потом заполнайл div. Но не тут то было, всё равно вылазит html...

Надо было не вставлять контент из JavaScript, а подгрузить его с файла на сервере. Или дождаться полной загрузки css и javascript файлов.

Автор: inohodec 11.9.2012, 16:57

Всем спасибо, попробую разобраться:)

Автор: lomaster 12.9.2012, 00:01

Цитата

Затем сделал <body onload="init(); ">

onload работает соответственно поле того как боди загрузилось, пропишите скрипт в head, последним элементом, типа так

Код


<head>
........
<script>
// ваш скрипт
</script>
</head>

Автор: Aliance 14.9.2012, 09:56

lomaster, боюсь что в таком случае не будет доступа к DOM, который используется в скрипте.

Что если сделать родные стили что-то типа

Код


.main {
    display: none;
}
.temp {
    display: block;
}

Код


<body>

<div class="main">тут основной контент страницы</div>
<div class="temp">идет загрузка</div>

</body>

А в подключаемых стилях инвертировать видимость этих блоков.