javascript - Which HTML elements support onerror attribute? - Stack Overflow

admin管理员组

文章数量:1332358

I have a site that loads CSS and fonts from Google Web Fonts. However, one place where the site will be used is a local intranet with no Internet access.

I still want to use the fonts from Google where I can for the benefits that Google offers, such as the fonts being downloaded from a CDN and possibly already being cached on the user's puter from visits to another site that uses them.

I also use Google-hosted jQuery and I use the following code (from HTML5 Boilerplate) to load jQuery from my server if Google is not accessible:

<script src="//ajax.googleapis/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>

I am looking for a way to do the same for CSS files.

I have used <img src="..." onerror="..." /> in the past for handling images that don't load, so I was wondering if I can use that for stylesheets that don't load too. I did a quick test in a few browsers, using <link href="..." onerror="..." rel="stylesheet" type="text/css" />, and the onerror was executed in all of them, but I would like to find out if I can expect this to work consistently in all browsers. Or is there a better way to do it?

I saw several other answers here that discuss watching the document.styleSheets collection, but that sounds like much more of a hack than this does.

---

Note: This is really more of a "is this practical and do people use it"-question than a "what does the spec have to say about it"-question.

I have a site that loads CSS and fonts from Google Web Fonts. However, one place where the site will be used is a local intranet with no Internet access.

I still want to use the fonts from Google where I can for the benefits that Google offers, such as the fonts being downloaded from a CDN and possibly already being cached on the user's puter from visits to another site that uses them.

I also use Google-hosted jQuery and I use the following code (from HTML5 Boilerplate) to load jQuery from my server if Google is not accessible:

<script src="//ajax.googleapis./ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>

I am looking for a way to do the same for CSS files.

I have used <img src="..." onerror="..." /> in the past for handling images that don't load, so I was wondering if I can use that for stylesheets that don't load too. I did a quick test in a few browsers, using <link href="..." onerror="..." rel="stylesheet" type="text/css" />, and the onerror was executed in all of them, but I would like to find out if I can expect this to work consistently in all browsers. Or is there a better way to do it?

I saw several other answers here that discuss watching the document.styleSheets collection, but that sounds like much more of a hack than this does.

---

Note: This is really more of a "is this practical and do people use it"-question than a "what does the spec have to say about it"-question.

• javascript
• css
• onerror

Share Improve this question Follow asked Jan 18, 2013 at 4:32 Moshe KatzMoshe Katz 16.9k77 gold badges7070 silver badges125125 bronze badges 5

• I've never used it, but then again, I didn't know it existed, so... – PitaJ Commented Jan 18, 2013 at 4:39
• The quirksmode page (quirksmode/dom/events/error.html) says that it is not supported, but those are mostly old versions, so it appears that there have been changes. You can try your browser on their test page: quirksmode/dom/events/tests/error.html – yakatz Commented Jan 18, 2013 at 4:41
• 1 @PitaJ I actually found out about it when someone used it for a cross-site scripting attack on a forum that a class I was in used. The forum software filtered out javascript in <script> tags and onclick properties, etc., but did not filter out the onerror property. A student used that flaw to obtain all the session cookies and was impersonating an instructor for some time before anyone found out. – yakatz Commented Jan 18, 2013 at 4:44
• @yakatz you make a list of whitelisted attributes for each of your whitelisted elements (preferably making sure that the attributes required for valid x/HTML/5 are available) or at least filter out every on* attribute. – Paul S. Commented Jan 18, 2013 at 4:47
• @PaulS. I know that, but the developer of the forum software did not. I almost always use whitelists. That mostly protects you from new standards (like HTML5). – yakatz Commented Jan 23, 2013 at 16:17

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

I believe the list of supported events on <script> and <link> at pieisgood is what you're looking for.

As you can see, onload is the most widely supported for <link> which is very lacking in working events. But you could try to implement an error event by having onload clearTimeout for some function that assumes an error happened.

<link>, <style>, and <script> all support the onerror attribute, and work in most modern/popular browsers.

A small caveat with <link> is that it will trigger the onerror event for either when the href URI is broken, or if any @import URIs in the linked stylesheet are broken.

The only way I found to trigger the onerror event for <style> was by using @import.

A broken @font-face does not seem to trigger the event for either tag.

本文标签： javascriptWhich HTML elements support onerror attributeStack Overflow