Question

如何动态地将CSS文件添加到文档HEAD并等到文件完全加载？我正在使用iframe所以这里是我的例子，我是如何将CSS dynamicaly插入到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元素发生更改时，您需要检查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
   }
});

如果这不是你想要的，我希望这至少可以帮助你开始。

致以最诚挚的问候，

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

1 个答案: