6

В следующем вопросе я оставила свой первый ответ, но в комментариях обратили внимание на неверное предоставление информации и посоветовали вставить необходимый для иллюстрации ответа код.

Но дело в том, что не воспроизводится скрипт вставки комментариев с привязкой к Facebook, и выводится следующая ошибка:

{
  "message": "Script error.",
  "filename": "",
  "lineno": 0,
  "colno": 0
}

(собственно, всё это можно увидеть в ниже прикреплённом проблемном коде)

Благодаря инспектору могу предположить, что причина - конфликт со скриптами от facebook, что-то про конфликт безопасности.

Как верно следовать в такой ситуации, когда из-за конфликта невозможно полноценно продемонстрировать необходимый для ответа пример?

var commentBox = document.getElementById('lightgallery');

lightGallery(commentBox, {
  appendSubHtmlTo: '.lg-item',
  addClass: 'fb-comments',
  download: false,
  enableDrag: false,
  enableSwipe: false
});

commentBox.addEventListener('onAfterSlide', function(event) {
  var items = document.querySelectorAll('.lg-outer .lg-item');
  if (!items[event.detail.index].getAttribute('data-fb')) {
    try {
      items[event.detail.index].setAttribute('data-fb', 'loaded');
      FB.XFBML.parse();
    } catch (err) {
      window.addEventListener('fbAsyncInit', function() {
        items[event.detail.index].setAttribute('data-fb', 'loaded');
        FB.XFBML.parse();
      });
    }
  }
});
<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/lg-fb-comment-box.min.css" rel="stylesheet" />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/lightgallery.min.css" rel="stylesheet" />
</head>

<body>
  <!--Facebook script-->
  <div id="fb-root"></div>
  <script>
    (function(d, s, id) {

      var js, fjs = d.getElementsByTagName(s)[0];

      if (d.getElementById(id)) return;

      js = d.createElement(s);
      js.id = id;

      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";

      fjs.parentNode.insertBefore(js, fjs);

    }(document, 'script', 'facebook-jssdk'));
  </script>
  <div id="lightgallery">
    <a href="https://s8.hostingkartinok.com/uploads/images/2017/09/23a6461b9b8a8cb0a25e046c26053cf6.jpg" data-sub-html='<div class="fb-comments" data-href="#" data-width="400" data-numposts="5"></div>'>
      <img src="https://s8.hostingkartinok.com/uploads/thumbs/2017/09/23a6461b9b8a8cb0a25e046c26053cf6.png" />
    </a>

    <a href="https://s8.hostingkartinok.com/uploads/images/2017/09/6345b81bd20f2f9993fbe64a5a461dd5.jpg" data-sub-html='<div class="fb-comments" data-href="#" data-width="400" data-numposts="5"></div>'>
      <img src="https://s8.hostingkartinok.com/uploads/thumbs/2017/09/6345b81bd20f2f9993fbe64a5a461dd5.png" />
    </a>

  </div>


  <!--jQuery-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <!--lightgallery js-->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/lightgallery.min.js"></script>
  <!--lightgallery hash plugin-->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lg-hash.min.js"></script>

</body>

1 ответ 1

7

Если ваш пример не помещается в сниппет, просто не используйте его. Это лишь удобство для ограниченного числа случаев. Ваш не из них.

Браузерный JavaScript ведь лишь одна из областей, о которой здесь задаются вопросы и пишутся ответы. И подавляющее большинство вопросов содержит код для воспроизведения, и в подавляющем большинстве случаев этот код невозможно запустить в сниппетах. Потому ли, что речь об ограничениях сниппетов, или об ограничениях браузерного JS, или о небраузерном JS, а то и вообще не о JS.

Тем не менее, самые разные проблемы воспроизводятся и решаются каждый день.

В вашем случае придётся действовать по старинке: приложить код для воспроизведения (правильно отформатировав) и рассчитывать, что читатели предпримут дополнительные действия, чтобы получить то же, что у вас. Можно им дополнительно помочь, эти действия явно указав.

Слишком многого ожидать от читателя, впрочем, тоже не стоит: каждое необходимое действие (включая прочтение каждого абзаца) снижает вероятность того, что он продолжит изучать проблему/решение. Бывает, конечно, что проблему можно идентифицировать или понять, просто прочитав код, не запуская пример вовсе. Но рассчитывать на это всё-таки не стоит.

Приложите сведения, с помощью которых ваш пример можно быстро воспроизвести. Сниппет в этом плане хорош, просто здесь оказался недостаточен. Но на нём свет не сошёлся: другие "области" Stack Overflow прекрасно обходятся без них.

В данном случае, вероятно, это будет блок кода (не сниппет), содержащий цельную HTML-страничку (которую можно в одно движение скопировать в файл); а рядом примечание о том, что страничку надо открывать через вебсервер, иначе пример не запустится. Можно разместить эту страничку самостоятельно где-нибудь, хоть на GitHub Pages, но лишь как дополнение: код для воспроизведения должен находиться непосредственно в сообщении, и должен излагать суть, даже когда ссылки наружу начнут вести вникуда.

Войдите, чтобы ответить на этот вопрос.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками .