在从服务器下载样式表之前使用 javascript 替换样式表 href答案

【问题标题】：Using javascript to replace a stylesheet href before it is downloaded from server在从服务器下载样式表之前使用 javascript 替换样式表 href
【发布时间】：2011-07-28 20:50:57
【问题描述】：

是否可以使用一些 javascript 来阻止下载外部脚本/样式表？例如，在<head> 的最顶部放置一小块javascript 来对文档中的所有<script> 和<link> 标记进行一些操作，也许将相对路径更改为绝对路径，之前他们的原始相对路径源是从服务器下载的？

我不是在寻找替代方案，例如服务器端处理或手动更改<script> 和<link> 标签。我对我无法控制最终文档或其生成的场景的概念验证感兴趣除了插入单个脚本标签。

【问题讨论】：

标签： javascript performance dom rendering stylesheet

【解决方案1】：

不，你不能。

问题出在文档的头部，脚本将无法访问尚未加载的节点，因此它无法修改任何即将出现的脚本标签。

此外，浏览器在到达脚本标记后立即加载 JavaScript，并暂停解析 html，直到脚本标记完成。

也就是说，JavaScript 无法做到这一点。

【讨论】：

【解决方案2】：

可能是这样的：？

$(function(){
    $("link").each(function(){
        $(this).attr('href','NEW_URL.css');
    });   
});

这会改变所有元素的 href 属性，但我不能保证它会改变样式，因为这个脚本会在 DOM 准备好时执行。

附：它不是纯 javascript - 它是 jQuery（抱歉，如果您需要纯 javascript）

附言- 我刚刚尝试过 - 应用了 CSS。这并不意味着您可以阻止下载用标签编写的 css 文件。它们已下载，但当 DOM 准备好（加载文档）时 - 样式会更改。它非常快 - 你无法看到旧样式 =)

【讨论】：

【解决方案3】：

CSS 的工作方式相当有趣，就其动态性而言。话虽如此，您可以在下载css后使用javascript更新css的URL，并且当链接更改时它的效果将失效（99％肯定）。

如果上面的方法失败了，CSS 又是惊人的，这意味着你可以插入一个新的链接节点，一个新的 CSS 基本上会覆盖任何和所有以前的 CSS 样式到你自己选择的样式。

你想达到什么目的？

【讨论】：