Блог

Я использую найденный код для настройки кнопок социального обмена vanilla js. Код заставляет ссылки открываться во всплывающем окне. Это прекрасно работает, если содержимое тега представляет собой обычный текст, но если я помещу img внутри тега, откроется всплывающее окно, но ссылка на него не будет передана. Это просто окно «о:пустое».

Вот 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 lt; 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;  }  }());  

А вот и HTML-код. Если я использую это, оно отлично работает:

 lt;a href="https://www.facebook.com/sharer/sharer.php?u=https://www.example.com/blog/test.html" class="facebook share"gt;Facebooklt;/agt;  

Но если я использую это, всплывающее окно откроется, но ссылка не загрузится в новом окне. Он просто открывает всплывающее окно «о программе:пусто».:

 lt;a href="https://www.facebook.com/sharer/sharer.php?u=https://www.example.com/blog/test.html" class="facebook share"gt;lt;img src="/static/images/facebook-share.png" width="64px"gt;lt;/agt;  

В чем может быть проблема?

Проблемная линия заключается в:

 var t = (e.target ? e.target : e.srcElement);  

Во втором случае t это ссылка на img тег, и у него нет href атрибута, поэтому страница открывается черным цветом.

Вы можете просто выполнить проверку на случай, если это img возвращенный тег, найдите родительский a тег.

 // 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 lt; 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" amp;amp; 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;  }  }());