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

Question

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

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

这段代码只添加了 CSS 文件，但我需要在其内容加载后做一些操作。任何想法？我对每个选项都持开放态度，但 CSS 文件的内容不应作为内联代码插入。

谢谢

Answer 1

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

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

现在让我们构建您需要的这个函数。您正在将样式表附加到 head 中，因此当 head 元素发生变化时，您需要检查 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
   }
});

如果这不是您想要的，我希望这至少能让您有所作为。

最好的问候，