Как мне запустить тег <script>перед загрузкой html - PullRequest
Новая
       2

Как мне запустить тег <script>перед загрузкой html

0 голосов
/ 20 мая 2018

Проблема, с которой я сталкиваюсь, заключается в следующем: у меня есть веб-страница с несколькими страницами, такими как about, resources и т.д ...

Я хочу, чтобы у каждой страницы была своя собственная таблица стилей, а я нетЯ хочу загрузить все таблицы стилей страниц в <head>, если мне не нужно.

Таким образом, у меня возникла идея запустить файл .js следующим образом: 

$(document).ready(function () {
    if (window.location.pathname == "/") {
        document.querySelector('head').innerHTML += '<link rel="stylesheet" href="/Assets/css/main.css" type="text/css"/>';
    }
});

$(document).ready(function () {
    if (window.location.pathname == "/about") {
        document.querySelector('head').innerHTML += '<link rel="stylesheet" href="/Assets/css/about.css" type="text/css"/>';
    }
});

Моя проблема заключается в том, что страница запускает HTML-код перед внедрением этого тега <link>, который создаетэффект затвора страницы, загружаемой без css, а затем переключение top css.Если у вас есть хорошие предложения о том, как это исправить, или о лучшей практике, тогда я открыт для идей.Спасибо!

Ответы [ 2 ]

0 голосов
/ 20 мая 2018 
$(document).ready(function () { /* code */ });

Это фактически ожидает загрузки документа.Javascript должен быть выполнен до загрузки документа: Есть ли способ вызвать функцию «до готовности документа» в Jquery? 

if (window.location.pathname == "/") {
    document.querySelector('head').innerHTML += '<link rel="stylesheet" href="/Assets/css/main.css" type="text/css"/>';
}


if (window.location.pathname == "/about") {
    document.querySelector('head').innerHTML += '<link rel="stylesheet" href="/Assets/css/about.css" type="text/css"/>';
}

Но, как говорит t.niese, я бы проверилэтот сервер.

0 голосов
/ 20 мая 2018

Я бы просто поместил ссылку на таблицу стилей каждой страницы в HTML страницы, а не добавил ее с помощью JavaScript.Если добавить его позже с помощью JavaScript, то это приведет либо к появлению нестандартного содержимого, либо к задержке рендеринга страницы во время загрузки вашего ресурса JavaScript (поскольку, вероятно, вы используете для этого общий файл JavaScript, а не встроенный тег сценария).

Но если у вас есть причина для добавления его с помощью JavaScript, это один из немногих допустимых вариантов использования document.write во время основного анализа: 

var ss = {
    "/": "main",
    "/about": "about",
    // ...
}[window.location.pathname];
if (ss) {
    document.write('<link rel="stylesheet" href="/Assets/css/' + ss + '.css");
}

Это необходимо связать в head: 

<head>
<!-- ... --->
<script src="thefile.js"></script>
<!-- ... --->
</head>

... что обычно является анти-паттерном.

Опять же: я бы не стал этого делать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...