4

I have run into an issue where a lot of our support calls are about our images not loading because the user is blocking amazon s3 or a similar 3rd party service. I use 3rd party services for hosting images, video, and some javascript. Is there a way to detect through javascript if a client is blocking a domain so that we display a message instead of having the user contact support?

$.ajax 'http://aws.amazon.com/s3/',
  type: 'GET',
  dataType: 'html'
  complete: (e, xhr, settings) ->
    if e.status == 200
      console.log "Not Blocking S3"
    else
      console.log "Blocking S3"

Based on the comments I made an attempt at it, but it is still not working. It returns blocking when I have no blocks.

The above example coffeescript code does not work as I believe a security error occurs because it is doing an ajax on a different domain. Firebug shows the request in red, but says 200. e.status is returning 0.

John
  • 4,362
  • 5
  • 32
  • 50
  • 2
    Try and load a resource from that third-party, using JavaScript, and, if it can't be retrieved, give the message? – David Thomas Jun 11 '12 at 18:55
  • I think @DavidThomas means that you should use javascript to do the detection and report the result back to your webserver. – bluevector Jun 11 '12 at 18:57
  • @jonnyGold: I did indeed; clarified the original comment. =) – David Thomas Jun 11 '12 at 18:58
  • Does not seem to work. Edited original post. – John Jun 12 '12 at 20:43
  • [This](http://stackoverflow.com/questions/12994419/jquery-to-check-image-exists-if-head-404-than-hide-it#answer-12994474) SO answer is also applicable, and it worked better for my purposes. – Chris Mar 11 '13 at 20:05

1 Answers1

7

Load an image from the domain you want to check against.

<img id="checkImg" src="https://www.google.com/images/srpr/logo3w.pngAAA" />

​ Just a regular image tag (notice the AAA at the end to make it not work). Then you can check the width of the image to see if it loaded or not.

if(document.getElementById('checkImg').clientWidth != 275)
    alert("Error")

The Google logo is 275px wide but the error image (in Chrome at least) is only 18px. So if the image is not 275px wide, I know it did not load.

Demo

sachleen
  • 30,730
  • 8
  • 78
  • 73
  • +1 - This way you don't get cross domain access issues that you would get in Javascript trying to load external resources – Andrew M Jun 12 '12 at 22:07