哈希更改后的Android浏览器没有apple-touch-icon-precomposed答案

【问题标题】：Android Browser after hash change no apple-touch-icon-precomposed哈希更改后的Android浏览器没有apple-touch-icon-precomposed
【发布时间】：2012-07-11 07:25:22
【问题描述】：

我在 Android Stock Browser 和 Mobile Chrome 上遇到了一个奇怪的事情（错误？），它们都安装在 Android ICS 4.0.3/4 上（我都测试过）。从可靠消息来源得知，Android 2.3 也出现了同样的问题。

我想要达到的目标： 我最近添加了 apple-touch-icon-precomposed 图标链接，如果将其保存到主屏幕，可以使我的移动网站看起来像一个应用程序。我还添加了一个书签气泡，通知用户他们现在可以将我的移动网站保存为“应用程序”。当然，我不想将气泡显示给任何从他们的主屏幕上的类似应用程序的书签打开我的网站的人，所以我在加载时为还没有哈希的任何人添加了一个特殊的哈希。这样，当他们保存我的网站时，他们会将其与哈希一起保存，因此我可以检查他们是否通过正常链接 my.website.com/ 或通过他们的书签 my.website.com/#specialhash 打开了我的网站.我使用了一个很棒的库来简化整个过程：https://github.com/okamototk/jqm-mobile-bookmark-bubble

问题： 但是，在 Android 上，每当我通过 JS 更改哈希时，浏览器/操作系统将无法识别 apple-touch-icon-precomposed 的图标链接，而只会保存常规的 favicon.ico（看起来很糟糕，一点也不像应用程序）。

他们有什么我能做的吗？

附言。在移动 Chrome 中，正确的 apple-touch-icon-precomposed 会保存到书签库中，但每当我尝试将其保存到主屏幕时都不会。

【问题讨论】：

标签： javascript android apple-touch-icon

【解决方案1】：

这是移动 Chrome 的问题。见this bug。实验中，似乎使用apple-touch-icon 将其保存在书签库中，并在添加到主屏幕时将其呈现为页面上的一个小图标，但使用apple-touch-icon-precomposed 根本不会在主屏幕上呈现它 - 我得到一个地球上的页面图标。除了通过股票浏览器添加书签并使用股票书签小部件将其添加到主屏幕之外，您现在实际上无能为力。这些图标的 Chrome 书签和小部件已损坏。

【讨论】：

感谢您回答并确认问题！

【解决方案2】：

此解决方案适用于 Android 默认浏览器。

似乎在更改哈希后，android 默认浏览器对书签链接感到困惑，可能是因为它不再识别 url。我发现，如果在哈希更改后立即通过 JavaScript（在本例中为 jQuery）将书签图像链接标记插入 DOM，则问题得到解决。这是我用来解决此问题的解决方法：

// create the bookmark link 
MyObject.prototype.getBookmarkLink = function(imageName)
{
   var html = '';
   if (imageName) {
   html = '<link rel="apple-touch-icon-precomposed" href="' + PathToImages + '/' + imageName + '" />';
   }
   return html; 
};

MyObject.prototype.insertBookmarkImage = function(imageName)
{
   if (imageName) {
     // try to get the link that may already be there
     var existingBookmark = jQuery("link[rel='applfe-touch-icon-precomposed']");
     // if able to find it...
     if (existingBookmark.length) {
        // remove it...
        existingBookmark.remove(); 
        // ... then, put it back 
        jQuery('head').append(existingBookmark);
     } else {
        // we were not able to find it, so add a new one
        jQuery('head').append(this.getBookmarkLink(imageName)); 
     }
   }
};

【讨论】：