链接元素onload [英] link element onload

问题描述

还有没有为< link> 元素侦听onload事件？

例如：

  var link = document.createElement（'link'）; 
 link.rel ='stylesheet'; 
 link.href ='styles.css'; 
 
 link.onload = link.onreadystatechange = function（e）{
 console.log（e）; 
}; 
  

这适用于< script> ，但不是< link> 。还有别的办法吗？
我只需要知道外部样式表中的样式何时已应用于DOM。

更新：

这是一个想法注入隐藏的< iframe> ，添加< link& 到头部并侦听iframe中的 window.onload 事件？它应该在css加载时触发，但不能保证它在顶层窗口中加载...

解决方案

是一种黑客，但如果你可以编辑CSS，你可以添加一个特殊的风格（没有可见的效果），你可以听着使用这篇文章中的技术： http://www.west-wind.com/weblog/posts/478985.aspx

您将需要在页面中有一个CSS或CSS将影响的类或元素的元素。当您的代码检测到其样式已更改时，已加载CSS。

一个黑客，如我所说：）

Is there anyway to listen to the onload event for a <link> element?

F.ex:

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'styles.css';

link.onload = link.onreadystatechange = function(e) {
    console.log(e);
};

This works for <script> elements, but not <link>. Is there another way? I just need to know when the styles in the external stylesheet has applied to the DOM.

Update:

Would it be an idea to inject a hidden <iframe>, add the <link> to the head and listen for the window.onload event in the iframe? It should trigger when the css is loaded, but it might not guarantee that it's loaded in the top window...

解决方案

This is kind of a hack, but if you can edit the CSS, you could add a special style (with no visible effect) that you can listen for using the technique in this post: http://www.west-wind.com/weblog/posts/478985.aspx

You would need an element in the page that has a class or an id that the CSS will affect. When your code detects that its style has changed, the CSS has been loaded.

A hack, as I said :)

这篇关于链接元素onload的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！