javascript - How to listen for any 301302 redirect status codes on cross-domain image requests? - Stack Overflow

admin管理员组

文章数量:1410682

I have a few <img>'s that are linked (with the src attribute) to cross-domain URLS that may need to redirect to some other image URL. I need to somehow track every redirect that takes place when the browser requests the original URL.

So for example, If I have:

<img src=''/>

and sent a custom location header to .jpg, I need to know about it. How could I detect a redirect in JS or jQuery on a <img>?

I have a few <img>'s that are linked (with the src attribute) to cross-domain URLS that may need to redirect to some other image URL. I need to somehow track every redirect that takes place when the browser requests the original URL.

So for example, If I have:

<img src='http://www.something./redirect'/>

and http://www.something./redirect sent a custom location header to http://something./pic.jpg, I need to know about it. How could I detect a redirect in JS or jQuery on a <img>?

• javascript
• jquery
• html
• image

Share Improve this question Follow edited Jul 28, 2012 at 5:37 asked Jul 26, 2012 at 6:14 user849137user849137 4

• You can't do this with ordinary javascript. You'll need an extension or plugin. (It's probably possible with a userscript, but I don't feel like checking right now). What is the real purpose of this exercise? (The means may be unworkable, but the madness might yet be achieved.) – Brock Adams Commented Jul 28, 2012 at 8:41
• 1 Without server - impossible. With server - trivial. Take your pick :P – Esailija Commented Jul 29, 2012 at 21:37
• That's just it @Esailija, I can't use server side scripts to do the requests. I need them done on the clients machine, using the clients IP and cookies. Why? Because some of the URLS may be linked to a site that requires specific cookies set that will be sitting on the clients machine. And I obviously can't fetch those cookies from the client when they belong to a different domain (which I also have no control over). If only cross-domain AJAXing was allowed. What a shame. – user849137 Commented Jul 29, 2012 at 21:46
• You can do cross-domain AJAX from a userscript, or a plugin, or an extension (add-on). – Brock Adams Commented Jul 31, 2012 at 0:12

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1 +50

If you're not constrained to IE7 you could use a cors solution. That will let you request cross-domain without the limitations of JSON-P (i.e. you can get status codes).

See https://developer.mozilla/en/http_access_control for more information. For a simple GET request you should be fine, but if you need to POST then you may need to preflight your request.

I don't think that's quite possible (of course I'm not an expert, but that's AFAIK), at least not as straight forward as one might think.

Here's what I think is as close as you can get to what you're looking for, I hope it gives you some ideas

var req = new XMLHttpRequest();
$('img').each(function() {
    req.open('GET', $(this).prop('src'), false);
    req.send(null);
    alert(req.status);
});

Two down sides:

1. Only for images on the same domain.
2. You have to request the images two times (or you can do the requests first, then use the results to show the images)

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<img id='img' src='' width='200' />
<script type='text/javascript'>

/* our image */
var image =  new Image();
$(image).load('yourimage.png', function(response, status, xhr) {
    if (xhr.status == 200) {
        // image loaded, now display the image
        $('#img').attr('src','yourimage.png')
    } else {
        alert(xhr.status);
    }
});

</script>

How about using Ajax to load the image, untested pseudo code following:

HTML:

<img id="img1" src="blank.gif">

JQuery:

GetImage("http://www.something./redirect");

function GetImage(url)
{
    $.ajax({
        type: "GET",
        url: url,
        success: function(data, textStatus) {
            if (data.redirect) {
                // data.redirect contains the string URL to redirect to
                ProcessLocationHeader(data);
                GetImage(data.redirect);
            }
            else {
                // No redirect means we have the correct image
                $("#img1").src = url;
            }
        }
    });
}

Since the browser will cache the image it won't be loaded from the server twize.

本文标签： javascriptHow to listen for any 301302 redirect status codes on crossdomain image requestsStack Overflow