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
Respuesta
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:
- apple-touch-icon-114x114-precomposed.png
- apple-touch-icon-144x144-precomposed.png
- apple-touch-icon-57x57 -precomposed.png
- apple-touch-icon-72x72-precomposed.png
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:
- 1. TWTweetComposeViewController no muestra enlace de vista previa
- 2. Quicklook vista previa incrustada
- 3. Omitir UIImagePickerController Vista previa?
- 4. JavaScript imprimir vista previa
- 5. Vista previa de Eclipse JSP
- 6. Widget Vista previa Guardar ubicación
- 7. Imprimir ServerReport sin vista previa
- 8. Android cámara vista previa tutorial
- 9. Vista previa de un empuje de Git
- 10. vista de superposición de cámara, solo para una vista previa?
- 11. Vista previa y visualización de PDF
- 12. Implementando mi propia vista previa de impresión?
- 13. Vista previa de PDF en C#
- 14. omnicompletion Vim: ventana de vista previa opcional
- 15. ¿Vista previa del sitio web de Javascript?
- 16. Android 3.0, Vista previa de widgets
- 17. Grabación de video sin previa vista
- 18. cámara androide de vista previa Rotación
- 19. Vista previa de Tridion y elementos HTML5
- 20. Live Wallpaper Vista previa en miniatura Tamaño
- 21. Vista previa imagen redondeada en iphone
- 22. UIImagePickerController sin superposición en la vista previa
- 23. ActionUrl en ASP.NET MVC Vista previa 5
- 24. Vista previa en vivo en el navegador
- 25. Android dibujar en cámara vista previa
- 26. Django Powered Sites
- 27. Apache 2 sites-available
- 28. Tomar foto sin vista previa Android
- 29. Imprimir PDF desde ASP.Net sin previa vista
- 30. Symfony multiple sites
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