How to test for connection to website?

gord · 15 Dec 2011 at 15:01

Aloha all,

I'm stuck. I have a web app. On the front page we have a Facebook social plugin that is sometimes blocked by company policy. When it's blocked it looks.. bad.

What I'd like to do is test to see if Facebook is accessible at that point in time and if not provide my own image rather than the plugin.

Does anyone know of a way to evaluate whether Facebook is accessible on load through JS?

Any help is much appreciated.

Thanks

visibleman · 15 Dec 2011 at 16:05

What about using a hidden iframe and checking if the contents loaded correctly (search the iframe's content for something that'd only exist on a successful load)? Bit bodgy but off the top of my head I can't think of anything else client-side.

gord · 15 Dec 2011 at 17:22

Well the FB social plugin I'm using is the iframe implementation. So I definitely could look for a unique element, but going about that I'm unsure. Would it happen fast enough to be a seamless load?

Staffy · 15 Dec 2011 at 21:45

Not done a lot with FB pages, but Could you put some javascript on the FB page that would tell a receiving script on your site that it is there?

If not you can test if the page has loaded with JS but may have issues particularly with some older browsers. Take a look at using something like onLoad=yourCheckFunction() in the iframe declaration. Or jquery has some features to help with this,

All of this though will only tell you when the page has loaded and you would have to set some kind of time limit, where if it hasn't loaded in the set time limit then show the image.

Just been thinking this over for a bit while making a brew. You could test by loading a image in JS from the FB page if it is there then load the page if not then load the image. That should be quicker. One thing to consider would be when the user comes back to the page you don't really want to check it again.

UncleRuckus · 16 Dec 2011 at 04:00

You could do a test for the image size?

Code:

if(this.facebook.image.x <= 0)
{
      this.facebook.image = backup.jpg;
}

Maybe worth looking into.

visibleman · 16 Dec 2011 at 11:49

Checking an image would be quicker but I'm sure it would be cached, so it'd return True when revisiting the site even if there isn't a connection to the external domain. Saying that, you could get around that by sticking random changing characters at the end of the images filename (eg - image.jpg?342342342).