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

【问题标题】：Dynamically load CSS to document head and wait after load将 CSS 动态加载到文档头部并在加载后等待
【发布时间】：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 文件的内容作为内联代码插入。

谢谢

【问题讨论】：

标签： jquery css iframe load domdocument

【解决方案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
   }
});

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

最好的问候，

【讨论】：