Home > Developer > JavaScript
1. onload event
Copy codeThe Code is as follows:
<! Doctype html>
<HTML>
<HEAD>
<Meta charset = "UTF-8"/>
<Title> Link Element onload </title>
<Link type = "text/css" rel = "stylesheet" href = "http://i3.sinaimg.cn/rny/webface/login/css/login101021_min.css" onload = "alert (this)"/>
</HEAD>
<BODY>
</BODY>
</HTML>
IE6/7:
IE8/9:
Opera:
That is, IE6, 7/8, 9, and Opera all support onload events, whereas Firefox, Safari, and Chrome do not.
Note: Use JS to create a link label and add it to the head. The above is the case.
2. onreadystatechange event
Copy codeThe Code is as follows:
<! Doctype html>
<HTML>
<HEAD>
<Meta charset = "UTF-8"/>
<Title> Link Element onreadystatechange </title>
<Link type = "text/css" rel = "stylesheet" href = "http://i3.sinaimg.cn/rny/webface/login/css/login101021_min.css" onreadystatechange = "alert (this)"/>
</HEAD>
<BODY>
</BODY>
</HTML>
In IE6, 7/8, and 9, no other browsers are displayed. Only Internet Explorer supports the onreadystatechange event of the link element. The status of readyState is loading and complete. You can use readyState to determine the loading status. Let's try to use JS to dynamically create link elements,
Copy codeThe Code is as follows:
<! Doctype html>
<HTML>
<HEAD>
<Meta charset = "UTF-8"/>
<Title> Link Element onreadystatechange </title>
</HEAD>
<BODY>
<Script>
Function createEl (type, attrs ){
Var el = document. createElement (type ),
Attr;
For (attr in attrs ){
If (attrs. hasOwnProperty (attr )){
El. setAttribute (attr, attrs [attr]);
}
}
Return el;
}
Var link = createEl ('link ',{
Href: 'http: // i3.sinaimg.cn/rny/webface/login/css/login101021_min.css ',
Rel: 'stylesheet ',
Type: 'text/css'
});
Link. onreadystatechange = function (){
Alert (this)
}
Document. getElementsByTagName ('head') [0]. appendChild (link );
</Script>
</BODY>
</HTML>
IE6, 7/8, and 9 are still displayed twice. Firefox, Safari, and Chrome are still unavailable. It seems that everything works normally, but what's amazing is that this time an onreadystatechange event is popped up in Opera, indicating that Opera supports the onreadystatechange event when the link element is dynamically created.
Related:
Https://developer.mozilla.org/en/HTML/Element/link
Http://msdn.microsoft.com/en-us/library/ms535848%28v=VS.85%29.aspx
Http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html#ID-35143001
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
