Estoy usando un código que encontré para configurar los botones para compartir en redes sociales de Vanilla js. El código hace que los enlaces se abran en una ventana emergente. Funciona perfectamente bien si el contenido de la etiqueta es solo texto sin formato, pero si coloco una imagen dentro de la etiqueta, se abre la ventana emergente, pero no se le pasa el enlace. Es solo una ventana "acerca de: en blanco".
Aquí está el js:
// create social networking pop-ups (function() { // link selector and pop-up window size var Config = { Link: "a.share", Width: 500, Height: 500 }; // add handler links var slink = document.querySelectorAll(Config.Link); for (var a = 0; a < slink.length; a++) { slink[a].onclick = PopupHandler; } // create popup function PopupHandler(e) { e = (e ? e : window.event); var t = (e.target ? e.target : e.srcElement); // popup position var px = Math.floor(((screen.availWidth || 1024) - Config.Width) / 2), py = Math.floor(((screen.availHeight || 700) - Config.Height) / 2); // open popup var popup = window.open(t.href, "social", "width="+Config.Width+",height="+Config.Height+ ",left="+px+",top="+py+ ",location=0,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=1"); if (popup) { popup.focus(); if (e.preventDefault) e.preventDefault(); e.returnValue = false; } return !!popup; } }());Y aquí está el HTML. Si uso esto, funciona perfectamente:
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.example.com/blog/test.html" class="facebook share">Facebook</a>Pero si uso esto, se abre la ventana emergente, pero el enlace no se carga en la nueva ventana. Simplemente abre una ventana emergente "acerca de: en blanco":
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.example.com/blog/test.html" class="facebook share"><img src="/static/images/facebook-share.png" width="64px"></a>¿Cuál puede ser el problema?
La línea problemática es:
var t = (e.target ? e.target : e.srcElement); En el segundo caso, t se refiere a la etiqueta img y no tiene atributo href , por lo que la página se abre en negro.
Simplemente puede ejecutar una verificación en caso de que se devuelva a etiqueta img , busque la etiqueta principal.
// create social networking pop-ups (function() { // link selector and pop-up window size var Config = { Link: "a.share", Width: 500, Height: 500 }; // add handler links var slink = document.querySelectorAll(Config.Link); for (var a = 0; a < slink.length; a++) { slink[a].onclick = PopupHandler; } // create popup function PopupHandler(e) { e = (e ? e : window.event); var t = (e.target ? e.target : e.srcElement); if (t.tagName === "IMG") { // look for parent "A" tag t = t.parentNode; while (t.tagName !== "A" && t.tagName !== "BODY") { t = t.parentNode; } } // popup position var px = Math.floor(((screen.availWidth || 1024) - Config.Width) / 2), py = Math.floor(((screen.availHeight || 700) - Config.Height) / 2); // open popup var popup = window.open(t.href, "social", "width="+Config.Width+",height="+Config.Height+ ",left="+px+",top="+py+ ",location=0,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=1"); if (popup) { popup.focus(); if (e.preventDefault) e.preventDefault(); e.returnValue = false; } return !!popup; } }());