Как работает моя страница в данный момент:
1) Javascript просматривает мой URL, то есть www.domain1.com/query <- и сохраняет этот запрос после косой черты в виде переменной. В запросе генерируются случайные буквы и цифры (например, KL_Kg62hp). </p>
2) Метод Fetch используется с последним запросом @ www.domain2.com/query, и все полученные данные JSON сохраняются как var obj.
3) Необходимые таблицы стилей CSS и строка HTML с шаблонными литералами добавляются в body -> $ ("body"). Html (template).
4) Насколько я понимаю, браузер дважды просматривает код - сначала он добавляет строку HTML в тело с помощью JS, и только затем читает файлы, добавленные в CSS.
1) Попытка добавления необходимых таблиц стилей CSS к элементу head после выборки данных.
2) Пробовал жестко кодировать все возможные таблицы стилей CSS в элементе head и удалять все те, которые не соответствуют моему запросу, после получения данных.
3) Пробовал две функции извлечения данных - одну для получения необходимой таблицы стилей и следующую для извлечения всех остальных данных.
4) Пробная загрузка тела = 'dataRouter ()'.
5) Попытка добавления ссылки CSS на заголовок отдельно и перед добавлением шаблона HTML в тело.
<html>
<script>
function dataRouter() {
var query = window.location.pathname.split("/")[1];
fetch("www.domain2.com/" + query)
.then(res => res.json())
.then(data => (obj = data))
.then(function() {
dataobj = obj;
let template1CssLink = `<link href="./Styles/${obj.typeOfCss}.css" rel="stylesheet"/>`
let template1 = `<div> Data for the first page: ${obj} </div>`
let template2CssLink = `<link href="./Styles/${obj.typeOfCss}.css" rel="stylesheet" />`
let template2 = `<div> Data received the second page: ${obj} </div>`
let template3CssLink = `<link href="./Styles/${obj.typeOfCss}.css" rel="stylesheet" />`
let template3 = `<div> Data received for the third page: ${obj} </div>`
if (obj.typeOfCss === "firstPageCss") {
$("head").html(template1CssLink)
$("body").html(template1)
}
if (obj.typeOfCss === "secondPageCss") {
$("head").html(template2CssLink)
$("body").html(template2)
}
if (obj.typeOfCss === "thirdPageCss") {
$("head").html(template3CssLink)
$("body").html(template3)
}
}
}
dataRouter()
</script>
<body>
</body>
</html>
Случайный ответ от domain2 выглядит так:
{
"someParagraph" : "someText",
"someImg" : "somePicture",
"typeOfCss" : "firstPage"
}
Я хочу, чтобы брат сначала добавлял необходимый CSS, читал его и только потом добавлял HTML.