将 CSS 动态加载到文档头部并在加载后等待

Posted 2023-05-09

【中文标题】将 CSS 动态加载到文档头部并在加载后等待

【英文标题】：Dynamically load CSS to document head and wait after load

【发布时间】：2014-12-18 08:09:28

【问题描述】：

如何将 CSS 文件动态添加到文档 HEAD 并等待文件完全加载？我正在使用 iframe，所以这是我如何将 CSS 动态插入到 iframe 中加载的文档的示例。

$(iframe).contents().find('head').append('<link rel="stylesheet" type="text/css" href="style.css" media="screen" />');

此代码仅添加 CSS 文件，但我需要在其内容加载后执行一些操作。任何想法？ 我对所有选项都持开放态度，但不应将 CSS 文件的内容作为内联代码插入。

谢谢

【参考方案1】：

假设您对 jQuery 有所了解。 这可用于检查样式表是否已成功加载：

if($("link[href='/path/to.css']").length))
 // CSS succesfully loaded.

现在让我们构建您所追求的这个功能。 您正在将样式表附加到头部，因此当头部元素发生更改时，您要检查 CSS 是否已成功加载，然后做一些很棒的事情。 （或者在使用一些变量等加载 CSS 之前什么都不做。）

$("head").change(function()
   var url = "/path/to/stylesheet.css";
   if($("link[href='" + url + "']").length))
     // CSS succesfully loaded.
    else 
     // some problems with the CSS
   
);

如果这不是您想要的，我希望这至少能让您开始做一些事情。

最好的问候，