Динамически создавайте "Line it!" кнопка поделиться

У нас есть линия это! Кнопка "Поделиться" на нашей странице, блокирующая загрузку наших собственных ресурсов, вызывает большую проблему с производительностью.

С реализацией кнопки Line Share, предложенной line.me, их скрипт line-button.js должен быть включен в середину страницы, где когда-либо должна отображаться кнопка. Кнопка заменяет <script> элемент, из которого он инициирован:

<script type="text/javascript">
    new media_line_me.LineButton({"pc":false,"lang":"en","type":"b"});
</script>

Я могу добавить скрипт line-button.js на страницу после того, как наш собственный завершится:

function includeLine(callback) {
    var script = document.createElement('script');

    script.async = true;

    script.onload = callback;

    script.src = "//media.line.me/js/line-button.js?v=20140411";

    document.body.appendChild(script);
}

Затем я могу добавить элемент script следующим образом:

function initLine() {
    var 
        script = document.createElement('script'),
        line = ['new media_line_me.LineButton({"pc":false,"lang":"'];

    line.push(util.getLang());
    line.push('","type":"b"});');

    script.text = line.join('');

    publ.$elements.shareLine.append(script);
};

Но в line-button.js media_line_me.LineButton присоединяет слушателя к window.onload событие, которое к этому времени уже произошло.

Я действительно хочу убедиться, что все остальное сделано до того, как начнут загружаться какие-либо виджеты социальных сетей. Но сейчас у меня нет идей.

Есть ли другое решение, которое не загружает файл JS в виде текста, переписывает его в нашем скрипте, а затем eval() Это?

Источник

1 ответ

Вот твой идеальный ответ

кнопка динамического обмена LINE

Github - Naver LINE динамическая кнопка обмена

Кнопка динамического обмена добавляет:

  • класс CSS для обоих <a> а также <img>

  • Все параметры теперь являются мета-свойствами

  • загружает асинхронно, никакого взаимодействия не требуется!!

Пример использования

<!doctype html>
<html xmlns:og="http://ogp.me/ns#">
    <head>
        <meta name="naver-line-selector" content="" />
        <meta property="og:locale" content="en_US" />
        <meta property="og:url"    content="http://www.google.com" />
        <meta property="og:title" content="Dynamic Share button 0" />
        <script src="jquery.js"></script>
        <script>
            jQuery(document).ready(function() {
                $('meta[property="og\\:url"]').attr('content', 'https://www.google.com');
                $('meta[property="og\\:title"]').attr('content', 'Lets exchange LINE');
                $('meta[property="og\\:locale"]').attr('content', 'en_US');
                $('meta[name="naver-line-selector"]').attr('content', '#after-this');
               (function(d) {
                   var po = d.createElement('script');
                   po.type = 'text/javascript'; po.async = true;
                   po.src = 'naver-LINE-share-button.js?v=20140411';
                   var s = d.getElementsByTagName('script')[0];
                   s.parentNode.insertBefore(po, s);
              })(document);
          });
        </script>
    </head>
    <body>
        <div id="after-this"></div>
    </body>
</html>

Обратите внимание, что реализация - это чистый JavaScript. jQuery $. уже используется только для HTML для удобства

Призыв к действию

Могли бы использовать следующее

  • Глянцевая кнопка с закругленными углами

  • распространяя эту библиотеку JavaScript повсюду

Источник
Другие вопросы по тегам