2

How would one go about detecting if an image src was broken from within an iFrame?

It's for a WYSIWYG editor, so I'd need the event to fire as soon as the broken image loaded. In the case a user inputs a broken link.

I've tried using onerror, which works great for when they submit the image to the site, but I would like to detect whether its an error in real time.

Clint
  • 169
  • 1
  • 12
  • You could check to ensure the resource sent an http response of 200, and if not, you know it wasn't loaded. When I get home I can try to come up with a good JS/jQuery solution for this – Brock Amhurst Jan 22 '15 at 20:46
  • Thanks! I'm a bit new to javascript so I'll wait for you to post your solution – Clint Jan 22 '15 at 20:52
  • No problem. Btw, is this an iframe that you have control of? Ie you can edit it and add/modify JavaScript code in it? – Brock Amhurst Jan 22 '15 at 20:55
  • Im using it as a text-area, so it has no src (although I assume that it takes the src of the parent page). I do have control over it. – Clint Jan 22 '15 at 20:57
  • And what exactly is the problem with `Image.onerror`? If the loading of the image fails the events gets triggered instantly. – Andreas Jan 22 '15 at 20:58
  • It seems to not be the case, when the img gets inserted into iFrame it comes up as the default small "broken image" icon. Its not until the image is posted and page reloaded that the event is firing. This may be a problem of the iFrame, that the event doesn't get sent to the main parent page? – Clint Jan 22 '15 at 21:03
  • Ok, I think I get what you're working with. So essentially you would want to define a Javascript function in the parent document like `function ImageError()` which you would then call from the iframe using `parent.ImageError()` – Brock Amhurst Jan 22 '15 at 21:04
  • See [this post](http://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript) for an alternative to the onerror event for images – Brock Amhurst Jan 22 '15 at 21:09
  • Thanks again, could you also tell me how to call a function from the iFrame? My apologies if its really obvious. – Clint Jan 22 '15 at 21:11
  • No problem, but I'm on my iPhone at the moment so I will have to wait till I'm back on my laptop for a fuller explanation. Give me about 30 minutes. – Brock Amhurst Jan 22 '15 at 21:14

1 Answers1

1

This is a crude example, but unfortunately iframes don't quite function properly in JSFiddle so we'll just have to pretend that <div class='iframe'></div> is actually an iframe: http://jsfiddle.net/d74cah5z/3/

Essentially in your image upload function, you would create a new var image = Image(); variable and then set image.url equal to the URL the user has inputted. There's then an onload and an onerror function, one of which will fire depending on whether the image was uploaded properly. In the onload function, you would set the src attribute of your <img> container equal to image.url. If instead the onerror() function is fired, you would call your error function that's in your parent document, using parent.ImageError()

Hope that helps.

Brock Amhurst
  • 497
  • 2
  • 5