简体   繁体   English

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

[英]Using javascript to replace a stylesheet href before it is downloaded from server

Is it possible to block the downloading of external scripts/stylesheets with a bit of javascript? 是否可以使用少量JavaScript阻止下载外部脚本/样式表? For example, putting a tiny block of javascript at the very top of <head> to do some operation on all <script> and <link> tags in the document, perhaps changing relative paths to absolute paths, before their original relative-path'd sources are downloaded from the server? 例如,在<head>的最顶部放置一小段javascript,以对文档中的所有<script><link>标记进行一些操作,可能原始路径之前将相对路径更改为绝对路径。 d源是从服务器下载的?

I am not looking for alternatives such as server-side processing or manually altering the <script> and <link> tags. 我不是在寻找替代方法,例如服务器端处理或手动更改<script><link>标记。 I am interested in a proof-of-concept for the scenario where i have no control over the final document or it's generation except for inserting a single script tag. 我感兴趣的是证明了概念的场景,我没有对最后文件没有控制权,或者它只是将一个简单的脚本标签生成。

No, you cannot. 你不能。

The problem is in the head of the document the script will not have access to the nodes that are not yet loaded, so it cannot modify any script tags that will be coming up. 问题在于文档的开头,脚本无法访问尚未加载的节点,因此它无法修改将要出现的任何脚本标签。

Also, the browser loads JavaScript as soon as it gets to the script tag and halt parsing the html until the script tag completes. 另外,浏览器一到达脚本标签就立即加载JavaScript,并停止解析html,直到脚本标签完成。

That means, there is no way of doing it with JavaScript. 这意味着无法使用JavaScript做到这一点。

May be something about this:? 可能与此有关:

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

This will change the href attributes of all elements, but I can't assure that it will change the styles, because this script will be executed when DOM is ready. 这将更改所有元素的href属性,但是我不能保证它将更改样式,因为在DOM准备就绪时将执行此脚本。

PS It's not pure javascript - it's jQuery (sorry, if you needed pure javascript) PS这不是纯JavaScript,而是jQuery(很抱歉,如果您需要纯JavaScript)

PPS - I've just tried this - CSS is applied. PPS-我刚刚尝试过-CSS已应用。 It doesn't mean that you can block downloading the css files, that are written in tag. 这并不意味着您可以阻止下载用标记编写的css文件。 They are downloaded, but when DOM is ready (document is loaded) - styles are changed. 它们已下载,但是在DOM准备就绪(加载文档)时-样式已更改。 It's pretty fast - you wan't be able to see old styles =) 速度非常快-您将看不到旧样式=)

Well CSS works rather interesting, in the sense of how dynamic it is. 从动态性的角度来说,CSS的工作原理很有趣。 That being said, you can use javascript to update the URL of the css after it downloaded and it's effects will be nullified when the link changes (99% sure). 话虽如此,您可以在下载后使用javascript来更新css的URL,并且当链接更改时,其效果将无效(99%可以肯定)。

If the above fails, CSS is again amazing, meaning you can insert a new link node, to a new CSS that basically overwrites any and all previous css styles to that of your own choosing. 如果以上方法失败,那么CSS会再次令人赞叹,这意味着您可以将新的链接节点插入到新的CSS中,该CSS基本上会将以前的所有CSS样式覆盖为您选择的样式。

What are you trying to achieve? 您想达到什么目的?

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM