动态LINE分享按钮

Question

我们有一条线！在我们的页面上分享按钮，它阻止加载我们自己的资源，导致一个很大的性能问题。

随着Line Share按钮proposed by 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);
}

然后我可以像这样注入脚本元素：

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()它？

Answer 1

这是您的完美答案

动态LINE分享按钮

Github -- naver LINE dynamic share button

动态分享按钮添加：

<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 $ .ready仅在html上使用

号召性用语

可以使用以下

带圆角的光泽按钮
广泛传播这个JavaScript库

动态创建“Line it！”分享按钮

1 个答案:

动态LINE分享按钮

动态分享按钮添加：

使用示例

号召性用语