Question

我遇到的问题是这样的：我有一个网页，其中有多个页面，例如，资源等...

＆＃xA;＆＃xA;

我希望每个页面都有有自己的样式表，如果我不需要，我不想在＆lt; head＆gt; 中加载所有页面样式表。

＆＃xA;＆＃xA;

所以我提出了让.js文件运行的想法：

＆＃xA;＆＃xA;

  $ （document）.ready（function（）{＆＃xA; if（window.location.pathname ==“/”）{＆＃xA; document.querySelector（'head'）。innerHTML + ='＆lt; link rel = “stylesheet”href =“/ Assets / css / main.css”type =“text / css”/＆gt;';＆＃xA;}＆＃xA;}）;＆＃xA;＆＃xA; $（文档）.ready（function（）{＆＃xA; if（window.location.pathname ==“/ about”）{＆＃xA; document.querySelector（'head'）。innerHTML + ='＆lt; link rel =“ stylesheet“href =”/ Assets / css / about.css“type =”text / css“/＆gt;';＆＃xA;}＆＃xA;}）;＆＃xA;

＆＃xA;＆＃xA;

我的问题是页面在注入此＆lt; link＆gt; 标记之前运行HTML，这会导致在没有css的情况下加载页面的快门效果，然后切换顶级css。如果你对解决这个问题的方法有任何好的建议，或者是更好的做法，那么我愿意接受。！谢谢

＆＃XA;

Answer 1

我只是将每个页面的样式表链接放在页面的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>

......这通常是一种反模式。

尽管如此：我不会这样做。

如何在加载html之前运行<script>标记

1 个答案: