Difference analysis of each browser's support for link tag onload/onreadystatechange events_javascript skills

1. onload event

Copy code The code is as follows:

< ;/HEAD>

IE6/7 :

IE8/9 :

Opera :

That is, IE6/7/8/9/Opera all support the onload event, but Firefox/Safari/Chrome do not support it.

Note: Use JS to create the link tag and add it to the head. The situation is as above.
2, onreadystatechange event

Copy code The code is as follows:

< link type="text/css" rel="stylesheet" href="http://i3.sinaimg.cn/rny/webface/login/css/login101021_min.css" onreadystatechange="alert(this)"/>

Two pop-ups in IE6/7/8/9 This time, other browsers did not play. Note that only IE supports the onreadystatechange event of the link element. It pops up twice: readyState is loading and complete state. ReadyState can be used to determine the loading status. Let’s try using JS to dynamically create link elements,

Copy the code The code is as follows:

< ;!DOCTYPE HTML>






<script> <br>function createEl(type, attrs){ <br>var el = document.createElement(type), <br>attr; <br>for(attr in attrs){ <br>if(attrs.hasOwnProperty(attr)){ <br>el.setAttribute(attr, attrs[attr]); <br>} <br>} <br>return el; <br>} <br>var link = createEl('link', { <br>href : 'http://i3.sinaimg.cn/rny/webface/login/css/login101021_min.css', <br>rel : 'stylesheet', <br>type : 'text/css' <br>}); <br>link.onreadystatechange = function(){ <br>alert(this) <br>} <br>document. getElementsByTagName('head')[0].appendChild(link); <br></script>

IE6/ Still popped up 2 times on 7/8/9. Firefox/Safari/Chrome still doesn't work. Everything seems to be normal, but the amazing thing is that this time it pops up in Opera, indicating that Opera supports the onreadystatechange event when dynamically creating link elements.

Related:

https://developer.mozilla.org/en/HTML/Element/link
http://msdn.microsoft.com/en-us/library/ms535848( v=VS.85).aspx
http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html#ID -35143001