#javascript #php #css
#javascript #php #css
Вопрос:
Если где-то уже дан ответ, я был бы признателен за ссылку, я просто не могу ее найти.
Я загружаю страницы .php с помощью <?php include 'header.php'; ?> прямого действия или при нажатии кнопки / ссылки с помощью
<a href="#" data-toggle="modal" role="button" data-target="#genericModal" onclick="loadModalContent('profil.php','genericModal')">.
Некоторым из загруженных дочерних элементов нужны те же .css и другие файлы, что и их родительские, поэтому я бы использовал следующий код для загрузки
function loadStyleSheet(uri){
//jquery might not be loaded yet, so do long form
var ss = document.styleSheets;
for (var i = 0, max = ss.length; i < max; i ) {
if (ss[i].href.indexOf(uri) > -1){
return;
}
}
var styleSheet = document.createElement("link");
styleSheet.href = uri;
styleSheet.rel = "stylesheet";
styleSheet.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(styleSheet);
};
и тогда у меня есть, т. е. два файла:
parent.php
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.css"/>
<link....something else and more....
</head>
<body>
load in one way or another the child.php
</body>
</html>
и
child.php (нет html, нет head или body)
<script>
loadStyleSheet("css/bootstrap.css");
loadStyleSheet("css/child.css");
</script>
<div class="xyz">
something more here
</div>
Но теперь мой вопрос в том, как браузеры реагируют на это. Поскольку в основном родительский файл уже прошел через свой <head></head> и создает страницу, и где-то в середине я говорю ему загрузить какой-нибудь другой код и, кстати, добавить .css с javascript к его <head> (у меня нет <head> s в дочерних файлах). Как браузеры реагируют на это?
Я понимаю, что, вероятно, мог бы использовать загрузчики, но пока хотел бы их избежать.
Я также мог бы добавить все дочерние файлы .css в родительские файлы, но для наглядности и загрузки по требованию дизайн хотел бы сохранить их в дочерних файлах .phps
Заранее спасибо!
Ответ №1:
Браузер должен немедленно реагировать на изменения DOM, которые будут включать добавление таблицы стилей.
Однако «сразу» ограничено, потому что браузер выполняет однопоточные операции и потому что ему необходимо фактически загрузить таблицу стилей (возможно, из удаленного местоположения).
Обычно повторный рендеринг происходит, когда заканчивается любой скрипт, который изменил DOM. (Это может означать, по существу, в </script> теге для встроенного скрипта или когда обработчик событий возвращает, если событие запустило скрипт …)
Итак, если бы вы выполнили пошаговое выполнение с помощью отладчика, вы бы увидели, что <link> элемент появляется под head, как только вы выполняете следующую строку:
document.getElementsByTagName("head")[0].appendChild(styleSheet);
Но страница еще не будет повторно отрисована.
Но даже при повторном рендеринге DOM, если новый ресурс таблицы стилей не успел загрузиться, то отображаемая страница не будет отображаться обновленной. Пользователю будет казаться, что таблица стилей применяется в какое-то неопределенное время, не раньше завершения скрипта, создавшего <link> элемент.
Комментарии:
1. Страница фактически повторно отображается через некоторое время после завершения скрипта, поскольку для загрузки таблицы стилей потребуется время. Это будет иметь заметное значение для медленных подключений к Интернету или больших таблиц стилей.
2. Верно; думал о ресурсах как о локальных, что, конечно, глупо. То, что я написал, было бы ближе к истине, если бы скрипт создавал тег <style> напрямую, чтобы исключить загрузку из уравнения — но в этом нет большого смысла. Обновление с более реалистичным ответом…
Ответ №2:
Я бы рекомендовал сначала добавить все css, которые нужны вашим родителям и дочерним элементам. Если вам нужна ясность, вы можете разделить его на два файла и добавить их оба.
Но если вы не можете, возможно, вы могли бы загрузить правила стиля внутри <style> тега вместо <link>
Конечно, если вы поместите css в <style> , вы не воспользуетесь преимуществами кэширования браузера, но если вы беспокоитесь о том, чтобы не использовать его, почему бы не загрузить весь css в первую очередь
взгляните на этот сайт
Комментарии:
1. добавление их в первую очередь означает, что если у меня несколько родителей, я всегда должен точно знать, какие дочерние элементы могут быть потенциально загружены, за которыми я на самом деле не хочу следить. Как стиль против ссылки помогает мне? Вы имеете в виду, что я должен поместить CSS-код непосредственно в php? Я действительно не
2. не хочу этого делать, так как я повторно использую файлы. Есть ли что-то конкретное, что вы имели в виду, что я должен посмотреть на предлагаемой странице. Мне кажется, это просто стандартная обработка CSS с помощью javascript, которую я фактически уже использую в своем коде выше.
3. или вы имели в виду со стилем вместо ссылки для добавления стиля элемента. Если да, то мой вопрос по-прежнему заключается в том, когда / как этот элемент будет (загружен) проанализирован.
4. Я подумал, вместо загрузки дочернего css в качестве нового ресурса (в вашей функции loadstyles вы создаете элемент link и добавляете его внутри head) Я бы загрузил таблицу стилей, но передал ее как содержимое
<style>и добавил к<body>5. Теперь я думаю… у вас есть несколько родителей и дочерних элементов. Как структурирован ваш CSS? возможно, вы могли бы установить свои разметки в той же иерархии, и таким образом вы могли бы использовать весь css и применять только соответствующий стиль.
Ответ №3:
Я не знаю, это именно то, что вы ищете, но это доказательство концепции, которое может сработать для вашего желаемого приложения.
<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.css" media="none" onload="$_font_awesome_media = this; console.log($_font_awesome_media.media); $_font_awesome_media.media='all'" />
<button type="submit" onclick="$_font_awesome_media.media='none'">Send Emails</button>
Кнопка будет управлять медиа-запросом, чтобы отключить файл font-awesome.css. Вы можете использовать этот метод для отображения css-файлов, которые вы хотите отобразить внутри ваших дочерних модулей.
Просто используйте следующий javascript, чтобы включить его.
$_font_awesome_media.media='all'
Пожалуйста, примите во внимание, что это, вероятно, «взлом», но он выполняет свою работу и очень эффективным способом. Файлы css будут загружаться в фоновом режиме, поэтому это не замедлит загрузку веб-сайта изначально. Если Javascript отключен, вам нужно будет определить, как обрабатывать это отдельно.