javascript - 如何从网站获取苹果触摸图标，如果不存在则显示图标？

Question

我想从网站上获取 Apple Touch 图标(据我了解，大多数网站的图标都存储在 website.com/apple-touch-icon.png)，如果出现 404 或者图像不存在，则使用 Google favicon 抓取器 (https://plus.google.com/_/favicon?domain_url=google.com)显示网站的图标。

用 js/jquery 可以吗？

Answer 1

您可以将图像的 url 设置为触摸图标 url，然后使用 onerror 事件将其更改为 favicon url。

function getImage(url) {
    image.src = url + "/apple-touch-icon.png";
    image.onerror = function() {
        image.src = "https://plus.google.com/_/favicon?domain_url=" + url;
    }
}

Demo (记得在输入框中的网址前加上http://)

但是，某些网站使用“apple-touch-icon.png”以外的网址，因此您可能需要使用多个错误函数以便始终获取 Apple touch 图标。

此外，某些网站(例如 google)会为不存在的图像返回 1px x 1px 图像，这意味着这不起作用。