En la sección Top Sites de Safari, la imagen iCloud.com muestra el logotipo en lugar de la pantalla de inicio de sesión como se puede ver a continuación. Normalmente, Top Sites solo muestra una imagen de la página web cargada (y la página cargada no se ve así). ¿Tienes alguna idea de cómo lograron esto? No pude encontrar nada en la documentación de Apple. Gracias por tu ayuda.Safari Top Sites de vista previa
Aquí está cómo se hace en iCloud para mostrar un Top Sites vista previa específica: (editado para el formateo)
if (window.navigator && window.navigator.loadPurpose === "preview") {
window.location.href = "http://www.icloud.com/topsites_preview/";
};
Fuente : http://blog.raffael.me/post/18565169038/defining-how-your-website-looks-like-in-safari-topsites
+1 porque todo tiene sentido. También revisé y este script se encuentra en la parte superior del sitio web de icloud. Es suficiente crear en la plantilla de vista previa 'topsites_preview /' y todo debería funcionar. Gracias Phil;) –
Creo que mediante programación agarrar una instantánea de la página cuando se ha terminado de cargar. Y si miras la barra de progreso en la parte superior, cuando iCloud muestra eso (solo el logotipo de iCloud), se ha terminado de cargar y está haciendo una pequeña animación.
Sin embargo, el sitio web nunca muestra JUSTO el logotipo y nunca es de ese tamaño. –
creo que lo hicieron especialmente para su servicio iCloud, que acaba de comprobar si el dominio es el dominio iCloud y si es que muestran este logotipo en lugar de la vista previa del sitio normal.
dispositivos táctiles de Apple pueden buscar imágenes precompuestas en su servidor web. Sé que puede consultar para estas imágenes:
Si compruebas el impulsoras del iCloud.com se dará cuenta de que tendrá <link /> elementos que apuntan a estos recursos también (porque no está en la raíz):
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/system/cloudos/en-us/1JPlus21/source/resources/images/apple-touch-icon-114x114.png">
Estoy adivinando aquí, pero tal vez safari busca las mismas imágenes para mostrar en la vista de sitios principales.
más sobre estos tipos de imágenes se puede encontrar aquí
http://theksmith.com/technology/howto-website-icons-browsersdevices-favicon-apple-touch-icon-etc/
Últimamente, hice algunos sitios con iconos de iPhone adjuntos, así que si tu respuesta es correcta, en lugar de printscreen debería obtener un icono especial, pero después de agregar el sitio a los sitios principales, no obtuve nada más que imprimir de mi sitio. Entonces creo que es algo más o algo más. –
@ Sófka parece que Phil lo descubrió (si funciona) yo simplemente estaba adivinando después de todo :) – sg3s
Sí;) Comprobé esta teoría porque fue interesante;) ¡Siempre es bueno intentarlo! Saludos;) –
De hecho, Safari no busca una etiqueta <link> o cualquier otra cosa. Hay dos cosas dfifferent que podemos utilizar:
Las cabeceras HTTP de la petición entrante en PHP.
Las propiedades del objeto window en JavaScript.
Las dos maneras funcionan muy bien y puede usar cualquiera de ellas, o incluso ambas, si quiere estar seguro.
PHP:
Si inspeccionamos las cabeceras HTTP, veremos que cuando es Safari Top Sites de vista previa que envía la solicitud, hay X_PURPOSE que se establece en preview. A continuación, se debe escribir en la página web de la normalidad:
if($_SERVER["HTTP_X_PURPOSE"]=="preview")
{
header("Location:thumbnail link");//Redirect to the thumbnail.
}
//Display the normal website.
Y se puede añadir en la página donde se encuentra la miniatura:
if($_SERVER["HTTP_X_PURPOSE"]!="preview")
{
header("Location:normal link");//Redirect to the normal website.
}
//Display the thumbnail.
Así que no se puede ver la imagen a excepción de la Safari Vista previa de los mejores sitios.
JavaScript:
window.navigator.loadPurpose tiene el valor preview si es Safari Top Sites de vista previa que trata de abrir la página web. Pero window.navigator no existe si está en una vista normal. Como tal, cuando pruebe este valor, debe probar la existencia misma de esta propiedad, así como su veracidad. Entonces este es el código de la página web normales:
if(window.navigator&&window.navigator.loadPurpose==="preview")
{
window.location.href="thumbnail link";//Redirect to the thumbnail
}
Y para la vista de miniaturas:
if(!window.navigator||window.navigator.loadPurpose!=="preview")
{
window.location.href="normal link";//Redirect to the normal website
}
pequeño truco de mí:
Si realmente quiere poner una etiqueta <link> puede escribir:
<link rel="safari-preview" href="thumbnail link" />
Y a continuación, añadir al final de la sección de la cabeza:
<script>for(var i=0,link=document.getElementsByTagName("link"),l=link.length;i<l;i++)if(link[i].getAttribute("rel")==="safari-preview"&&window.navigator&&window.navigator.loadPurpose==="preview")window.location.href=link[i].getAttribute("href");</script>
Fuentes:
Hay algo que no entiendo: el objetivo de la recompensa era tener una mejor respuesta que la de Phil y con más detalles. Entonces, ¿por qué le ofreciste la recompensa a Phil y no a mí? – Mageek
@Mageek Lo siento, comencé la recompensa ANTES de que Phil contestara ya que ninguna de las respuestas dadas era correcta. Realmente aprecio tu respuesta, pero Phil respondió primero. Te di un voto positivo. –
¿Esperaste hasta el final de la recompensa? – Mageek