gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 22:27:20 26 4
gpt4 key购买 nike

我遇到的问题是:我有一个包含多个页面的网页,例如关于、资源等...

我希望每个页面都有自己的样式表,我不想加载 <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"/>';
}
});

我的问题是页面在注入(inject) <link> 之前运行 HTML标签,它可以在没有 css 的情况下加载页面的关闭效果,然后切换顶部 css。如果您对解决此问题的方法或更好的做法有任何好的建议,那么我愿意接受想法。谢谢!

最佳答案

我会简单地将每个页面的样式表链接放在页面的 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>

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

不过,再说一次:我不会这样做。

关于javascript - 如何在加载 html 之前运行 &lt;script&gt; 标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50437709/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com