views:

471

answers:

5

Is there a way (preferrably using JavaScript) to determine whether a URL is to a SWF or a JPG?

The obvious answer is to sniff the filename for ".jpg" or ".swf" but I'm dealing with banners that are dynamically decided by the server and usually have a lot of parameters and generally don't include an extension.

so i'm wondering if I could load the file first and then read it somehow to determine whether it's SWF or JPG, and then place it, because the JavaScript code I'd need to display a JPG vs a SWF is very different.

Thanks!

+2  A: 

I am not sure the of the exact setup you have, but can you use the HTTP response and check the mime-type to determine image vs flash?

Sijin
possibly. It's a purely JavaScript/flash setup though so I won't have any access to any server-side scripts to do a HTTP req. If this is possible through JS though it might be the answer.
nerdabilly
A: 

If the URL doesn't have an extension then there is no way to tell without requesting the file from the server.

Diodeus
+3  A: 

I would extend Sijin's answer by saying:

An HTTP HEAD request to the url can be used to examine the resource's mime-type. You won't need to download the rest of the file that way.

Allain Lalonde
+2  A: 

You could use javascript to detect if it is a image by creating a dynamic img-tag.

function isImage(url, callback) {
    var img = document.createElement('img');
    img.onload = function() {
        callback(url);
    }
    img.src = url;
}

And then calling it with:

isImage('http://animals.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/animals/images/primary/bald-eagle-head.jpg', function(url) { alert(url + ' is a image'); });

Update This version will always execute the callback with a boolean value.

        function isImage(url) {
        var img = document.createElement('img');
        img.onload = function() {
            isImageCallback(url, true);
        }
        img.onerror = function() {
            isImageCallback(url, false);
        }
        img.src = url;
    }

    function isImageCallback(url, result) {
        if (result)
            alert(url + ' is an image');
        else
            alert(url + ' is not an image');
    }

Put your logic in the isImageCallback function.

loraderon
if I do this I think it would try to load the SWF too. SWFs can be loaded with the IMG tag, they just never display correctly when you do.
nerdabilly
I tested it in IE7, FF3 and Chrome. The callback is not called for swf.
loraderon
ok great! I've tried this and I like it. only one more question: if I try to load a SWF, since the callback never fires I need to place the WSF differently. would this result in 2 loads of the SWF? or how would I handle a SWF when isImage results in not being an image?
nerdabilly
Yes, it would. However, The swf is probably cached by the browser after the first attempt to download it.I have updated the answer with another version.
loraderon
great! I've accepted this answer and will try this! Thanks!
nerdabilly
+3  A: 

Completely untested, basicly just an idea:

function isImage(url)
{
    var http = getHTTPObject();
    http.onreadystatechange = function ()
    {
     if (http.readyState == 4)
     {
      var contentType = http.getResponseHeader("Content Type");
      if (contentType == "image/gif" || contentType == "image/jpeg")
       return true;
      else
       return false;
     }
    }

    http.open("HEAD",url,true);
    http.send(null);
}


function getHTTPObject() 
{
    if (window.XMLHttpRequest)
    {
     return new XMLHttpRequest();
    }
    else 
    {
     if (window.ActiveXObject)
     {
      return new ActiveXObject("Microsoft.XMLHTTP"); 
     }
    }
    return false;
}
FlySwat
I like this, was thinking about doing something like it. One question, if I make the request to determine the image's type, and then determine it's an image so load it, does that result in loading the same image twice?
nerdabilly
No, requesting using "HEAD" only retrieves the HTTP headers.
FlySwat