With javascript, how do you get final result URL after 302 redirect on img src?

Question

If there is an img tag in a page whose final image it displays comes after a 302 redirect, is there a way with javascript to obtain what that final URL is after the redirect

Answer 1

based on http://jsfiddle.net/jfriend00/Zp4zG, this snippets works in Firefox 17.0:

alert(document.getElementById("testImage").baseURI)

It doesn't work in Chrome. Not tested anything else-

Answer 2

Here is a workaround that I found out. But it works only if the image on the same domain otherwise you will get an empty string:

var img = document.getElementById("img");

getSrc(img.getAttribute("src"), function (realSrc) {
    alert("Real src is: " + realSrc);
});

function getSrc(src, cb) {
    var iframe = document.createElement("iframe"),
        b = document.getElementsByTagName("body")[0];

    iframe.src =  src;
    iframe.className = "hidden";
    iframe.onload = function () {
        var val;

        try {
            val = this.contentWindow.location.href;
        } catch (e) {
            val = "";
        }

        if (cb) {
            cb(val);
        }


        b.removeChild(this);
    };

    b.appendChild(iframe);
}

http://jsfiddle.net/infous/53Layyhg/1/

Answer 3

No, this is not possible. src is an attribute and it does not change.

Answer 4

I know this question is old, and was already marked answered, but another question that I was trying to answer was marked as a duplicate of this, and I don't see any indication in any of the existing answers that you can get the true URL via the HTTP header. A simple example (assuming a single image tag on your page) would be something like this...

var req = new XMLHttpRequest();

req.onreadystatechange=function() {
    if (req.readyState===4) {// && req.status===200) {
        alert("actual url: " + req.responseURL);
    }
}

req.open('GET', $('img').prop('src'), true);
req.send();

Answer 5

If you are open to using third party proxy this can be done. Obviously not a javascript solution This one uses the proxy service from cors-anywhere.herokuapp.com. Just adding this solution for people who are open to proxies and reluctant to implement this in backend.

Here is a fork of the original fiddle

$.ajaxPrefilter( function (options) {
  if (options.crossDomain && jQuery.support.cors) {
    var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
    options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
    //options.url = "http://cors.corsproxy.io/url=" + options.url;
  }
});

 $.ajax({
   type: 'HEAD', //'GET'
   url:document.getElementById("testImage").src,
   success: function(data, textStatus, request){
        alert(request.getResponseHeader('X-Final-Url'));
   },
   error: function (request, textStatus, errorThrown) {
        alert(request.getResponseHeader('X-Final-Url'));
   }
  });