Agregar favicon a javascript Bookmarklet(usa window.open)
(4)
"No quiero esta apertura en una pestaña nueva con un archivo HTML en blanco que luego abre una ventana emergente ... ¿Solución temporal ...?"
Si lo que realmente buscas es el efecto visual, puedes intentar ejecutar el HTML en blanco en un iframe oculto y luego lanzar el javascript.
Espero que ayude
Tengo un bookmarklet que inicia una función window.open javascript para abrir una pequeña ventana con mi bookmarklet, una característica externa que se usa para comunicarme entre cualquier sitio visitado y mi servidor. Me gustaría que aparezca un favicon cuando se agrega el marcador a la barra de herramientas de marcador. Me doy cuenta de que el bookmarklet es javascript, no hay ningún dominio vinculado a él, por lo que va a ser difícil o imposible lograr este objetivo.
Mi comprensión del problema:
Los Favicons son fáciles de entender, un enlace dentro del encabezado de un documento HTML. El navegador puede extraer esto cuando se marca un sitio real por referencia. Sin embargo, como veis, mi bookmarklet se escapó de un código de inicio de javascript donde no existe HTML, por lo que no hay ningún enlace a un favicon . Aunque aún no estoy dispuesto a darme por vencido, creo que hay una inyección que se puede hacer ...
A partir de ahora, el código de inicio de bookmarklet se ve así:
Script actual - bookmarklet, no favicon (tenga en cuenta que todo el código está formateado con saltos de línea; no funcionará en todos los navegadores, normalmente es una línea)
javascript:void(window.open(
''http://mydomain.com/bookmarklet/form?u=''
+encodeURIComponent(location.href)+
''t=''+encodeURIComponent(document.title),
''test'',''status=0,toolbar=0,location=0,menubar=0,
resizable=false,scrollbars=false,height=379,width=379''
));
Lo más parecido que he encontrado a una solución es la siguiente, pero no abre una nueva ventana: simplemente crea una nueva pestaña con el html como página:
Favicon de trabajo, sin ventana bookmarklet
javascript:''<!DOCTYPE html>
<html><head>
<title>Hello World</title>
<link rel="icon" type="image/png" href="http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png" />
</head>
<body>Hello World</body>
</html>'';
Intenté una combinación de los dos, pero no parecía usar el ícono. Me gustaría saber si alguien puede ver un tipo de solución alternativa. Creo que podría ser posible, simplemente no creo que esté configurada correctamente, como he estado intentando.
Mi híbrido de los dos - bookmarklet pero no favicon
javascript:''<!DOCTYPE html>
<html><head>
<title>Hello World</title>
<link rel="icon" type="image/png" href="http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png" />
</head><body>Hello World</body></html>'';
window.open(''http://mydomain.com/bookmarklet/form?u=''
+encodeURIComponent(location.href)+
''&t=''+encodeURIComponent(document.title),
''test'',
''status=0,toolbar=0,location=0,menubar=0,resizable=false,
scrollbars=false,height=379,width=379'').void(0);
Lo que hice fue utilizar la estructura html antes de activar window.open (), esto abrió mi bookmarklet con éxito en una nueva ventana, pero no apareció ningún favicon para el icono de marcador.
Solución lógica:
Mi opinión sobre esto sería hacer que el punto de referencia de bookmarklet sea una página que es simplemente un archivo HTML con un enlace de favicon y el script de inicio en <head> . Sin embargo, no quiero esta apertura en una nueva pestaña con un archivo HTML en blanco que luego abre una ventana emergente. ¿Solución temporal?
Existe una pregunta similar, pero no pareció encontrar la respuesta que estoy buscando:
¿Cómo se establece favicon / icon cuando se arrastró bookmarklet a la barra de herramientas?
Fuente para el favicon de Javascript que funciona (sin embargo, bookmarklet):
http://www.tapper-ware.net/blog/?p=97
Me interesaría saber cuál sería tu conocimiento / pensamientos actuales sobre esto
Algunas de las cosas que he probado que posiblemente te pueden ayudar un poco más:
Añada un nuevo elemento de enlace al documento actual:
javascript: var newLink = document.createElement(''link'');
newLink.setAttribute(''rel'',''icon'');
newLink.setAttribute(''type'',''image/png'');
newLink.setAttribute(''href'',''http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png'');
document.querySelector(''head'').appendChild(newLink);
void(0);
Tenga en cuenta que estaba usando el querySelector debido a las pruebas de IE (aunque también funciona en los navegadores modernos). Con Chrome y FF, seguí obteniendo caracteres no válidos al intentar crear el elemento, por lo que tuve que hacer la configuración de atributos por partes.
Intenté usar la cadena de imagen codificada en base64 usando el esquema de URI "data: image / png; base64, iVBORw0KGgoAAAA ...", pero eso no ayudó nada debido al hecho de que todavía tenía que establecerlo en el texto HTML actual (que Podría hacerlo, pero me encontré con el mismo problema que usted arriba de ningún bookmarklet).
Tal vez esto no se puede hacer debido a problemas de scripts entre sitios. No estoy seguro ... De cualquier manera, realmente tengo curiosidad por ver qué se te ocurre (si logras encontrar algo).
Intenté y reintenté, y mi primera conclusión fue: "No se puede hacer (al menos no en FF4 en Ubuntu 11.04)". Necesita (supongo) una solución simple para los visitantes de su sitio (arrastrar y soltar, agregar marcador con 1 clic ...).
He encontrado una solución alternativa, es su trabajo, pero es un poco problemático (tal vez alguien puede ayudar a solucionarlo).
PROS:
- agregar un ícono al bookmarklet
- usa windows.open
- no deja páginas vacías
CONTRAS:
- vuelve a cargar la página actual (en lugar de dejar una página atrás)
- No se puede hacer que el bloqueador de Firefox POP-ul permita la página HTML generada "javascript:" para cargar POP-ups, por lo que debes presionar permitir cada vez
Este es el código:
<a href="javascript:''<!DOCTYPE html><html><head><link rel="icon" type="image/png" href="http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png" /></head><body onLoad="window.open(/'http://example.com'',/'test/',/'status=0,toolbar=0,location=0,menubar=0,resizable=false,scrollbars=false,height=379,width=379/');setTimeout(/'history.back(-1);/',100);"></body></html>'';">Bookmarklet</a>
Este es un enlace que coloca en su página, el usuario necesita arrastrar y soltar este enlace a la barra de marcadores (puede usar algo como Agregar marcador de marcador para agregarlo como un marcador con 1 clic), el marcador no tiene ícono hasta que el usuario haga clic al menos una vez.
Entonces, ¿cómo funciona?
1. redirigir al usuario a la página HTML generada desde el bookmarklet (que hace posible el ICON )
2. onLoad abre la ventana que necesitas usando " windows.open "
3. redirigir la página hacia atrás usando " history.back (-1) "
En teoría, todo ocurre tan rápido, que el usuario no ve la página nueva, solo que la página actual se recarga y aparece una nueva ventana.
El problema:
1. Uso setTimeout para history.back beacause window.open está bloqueado por Firefox, así que tengo que hacer clic en permitir cada vez (si alguien puede arreglar esto ... tenemos la posibilidad de usar esto, desarrollarlo más :))
Sé que ESTA no es una solución confiable, pero esta es la única solución que tengo hasta ahora.
Espero que esto ayude un poco. :)
Puede que esta no sea la solución que deseas, especialmente si no usas Firefox, pero utilizo un add-on llamado Bookmark Favicon Changer para configurar los íconos en mis bookmarklets y funciona muy bien.