Question

我的页面目前的工作方式：

1）Javascript查看我的网址，即www.domain1.com/query <-，并将此查询保存在斜杠后作为变量。该查询是随机产生的字母和数字（例如KL_Kg62hp）。

2）后一种查询@ www.domain2.com/query使用了获取方法，接收到的所有JSON数据都存储为var obj。

3）必要的CSS样式表和带有模板文字的HTML字符串被附加到正文-> $（“ body”）。html（template）。

4）据我了解，浏览器浏览了两次代码-首先使用JS将HTML字符串附加到正文，然后才读取CSS附加文件。

1）尝试在获取数据后将必要的CSS样式表附加到head元素。

2）尝试在head元素中对所有可能的CSS样式表进行硬编码，并删除所有与我的查询不匹配的样式表。

3）尝试了两种数据获取功能-一种用于接收必要的样式表，另一种用于检索所有其余数据。

4）尝试正文onload ='dataRouter（）'。

5）尝试将CSS链接分别附加到head，然后再将HTML模板附加到body。

<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。

在将HTML动态附加到正文之前加载CSS

0 个答案: