Question

我有一个服务器端应用程序，它将在响应头中返回一个图像以及一些JSON数据。

在客户端，我有一个简单的html页面。想象一下，我按如下方式加载图像：

<img src="http://www.myserverapp.com/image1" />

在同一页面上，是否可以使用一些javascript来提取浏览器在加载页面时请求该图像时返回的响应标头？如果是这样 - 如何做到这一点？

另一种方法是将图像和JSON数据拆分为两个独立的资源，并让javascript单独向服务器发送请求以获取数据，但我在想是否可以将图像和JSON数据作为一部分返回浏览器的图像请求可能会提高性能并使事情更加简化。

谢谢！

编辑：我不想使用javascript动态加载图片 - 我知道我可以这样做，然后以这种方式提取标题信息，但我正在寻找浏览器加载的解决方案正常的图像然后一些javascript代码追溯进入并找出浏览器所做的图像请求的响应标题。

Answer 1

您可以通过XHR获取图片并获取所需的任何响应标头like this。

var url = 'https://placehold.it/400x400';
var proxy = 'https://jsonp.afeld.me/?url=';
var client = new XMLHttpRequest();

client.open('GET', proxy + url, true);
client.send();
client.onreadystatechange = function() {
    if (this.readyState === this.HEADERS_RECEIVED) {
        console.log(client.getResponseHeader('Content-Type'));
    }
};

注意由于CORS问题，我在此示例中添加了代理，但您可以将其保留在代码中。

Javascript从加载的img中提取响应头

1 个答案: