使用javascript,如何在img src上302重定向后获得最终结果URL?
如果页面中有一个img标记,它显示的最终图像是在302重定向之后显示的,那么javascript有没有办法获得重定向之后的最终URL?在img.src上使用javascript只会获取第一个URL(页面中的内容),而不是重定向到的内容使用javascript,如何在img src上302重定向后获得最终结果URL?,javascript,dom,Javascript,Dom,如果页面中有一个img标记,它显示的最终图像是在302重定向之后显示的,那么javascript有没有办法获得重定向之后的最终URL?在img.src上使用javascript只会获取第一个URL(页面中的内容),而不是重定向到的内容 这里有一个JSFIDLE示例:不,这是不可能的src是一个属性,它不会改变。基于此,此代码段在Firefox 17.0中工作: 它在Chrome中不起作用。没有测试任何其他内容-我知道这个问题很旧,并且已经被标记为已回答,但是我试图回答的另一个问题被标记为此问题的
这里有一个JSFIDLE示例:不,这是不可能的
src
是一个属性,它不会改变。基于此,此代码段在Firefox 17.0中工作:
它在Chrome中不起作用。没有测试任何其他内容-我知道这个问题很旧,并且已经被标记为已回答,但是我试图回答的另一个问题被标记为此问题的副本,并且我在任何现有答案中都没有看到任何迹象表明您可以通过HTTP头获得真实的URL。一个简单的例子(假设页面上只有一个图像标签)是这样的
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();
我发现了一个解决方法。但它仅在图像位于同一域时有效,否则您将得到一个空字符串:
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);
}
如果您愿意使用第三方代理,可以这样做。显然,不是javascript解决方案此解决方案使用cors-anywhere.herokuapp.com提供的代理服务。只是为那些对代理开放并且不愿意在后端实现的人添加了这个解决方案 这是一个
我不期待.src会改变,但想知道是否还有其他方法可以获得最终URL?@jfriend00我不知道。@jfriend如果他们在同一个域中,你可以尝试这样的方法:@Neal当我在Chrome中运行你的JSFIDLE时,我收到一个警告,上面只写着“未定义”。@jfriend。在我的小提琴中是bc,它们不在同一个域中。在Firefox 17中似乎对我不起作用。我得到的提示是
http://fiddle.jshell.net/jfriend00/wCXmn/show/
,但实际图像路径更像这样:http://www.smugmug.com/Family/Alaska-Trip-2005/i-v7L6qdv/0/Ti/DSC_0438-Ti.jpg
。也许你可以更详细地回答这个问题。这对图像上的302重定向有什么帮助?我不明白这与问题有什么关系。@jfriend这回答了一个问题,即如果存在302,如何解析源URL。但为了使其工作,必须有某种类型的跨站点脚本机制(CORS、jsonp等)。这不适用于您的情况,因为映像服务器未启用CORS。我把这个答案贴在这里是因为它回答了这个问题,另外还有一个问题被标记为这个问题的副本,当它被关闭时,我最初试图回答这个问题。
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);
}
$.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'));
}
});