如何使用JavaScript + jQuery确保URL是图像？

Question

在我的Web应用程序中,用户可以将文本发布到Feed,文本可能包含URL.我的代码扫描URL并替换它们指向URL的锚标签.我想更改此设置,以便我的代码可以检测URL是否指向图像,如果是,则在锚标记内呈现图像标记,而不仅仅是URL文本.

我可以在服务器端代码上执行此操作,方法是向URL发送一个快速的"HEAD"请求,以查看Content-Type在响应上的内容,并且这可以正常工作.但是,由于显而易见的原因,它不能很好地扩展.

如果我能将这个逻辑推到客户端的浏览器上,那会更好.我想使用JavaScript + jQuery将'HEAD'请求发送到指定的URL,并从响应中读取Content-Type标头.

我知道跨域请求是个问题.我可以以某种方式使用JSONP吗？我有什么选择？

编辑 - 安全风险

我对我的问题得到了一些很好的答案,但我想用大胆的字母指出一些东西.正如亚当在评论中指出的那样,这是一种安全隐患.如果您可以保证图像的URL都来自可信域,那么您最好使用此解决方案.但是,在我的场景中,用户可以输入他们想要的任何URL.这意味着他们可以创建自己的网站,需要基本身份验证,然后在jQuery的运行设置src属性所创建的图像上,用户会看到一个用户名/密码对话框,这显然是一个巨大的风险.

Answer 1

您可以尝试将其加载到隐藏的img元素中:

$('<img />').attr('src', url).load(function () { 
    alert('url contains an image'); 
}).error(function () {
    alert('url is no image');
});