Question

是否有一种相对干净的方式我可以获得twitter按钮的简单javascript版本的所有内置优点，但推迟执行其相当重的javascript，直到用户实际点击按钮？ / p>

我认为我可以像这样建立一个锚标记：

<a class="twitter-share-button" 
   onclick="clicked_twitter_button(this);" 
   data-url="http://www.mysite.com"
   data-count="none"
>             
    <img src="twitter_button.gif" />
</a>

然后定义一个类似的函数:(注：编辑原始帖子，现在设置href）：

function clicked_twitter_button( anchor_instance ) {
    // The line below is specified by twitter.
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
    anchor_instance.href = "https://twitter.com/share";
    // Do something to mimic click of < anchor_instance >
}

如果我使twitter_button.gif看起来与twitter指定的javascript通常插入的图像完全相同，那么执行twitter指定的javascript对于用户来说基本上看起来像是无操作。这应该很容易做到（假设Twitter的图像在所有平台上都是一样的）。

所以，希望我唯一需要帮助的是弄清楚在Twitter的javascript执行后如何模拟anchor_instance的点击。

我的目标是保留javascript twitter按钮提供的漂亮的弹出窗口（和默认值）。

谢谢。

Answer 1

您应该能够使用aElement.click()模拟链接上的鼠标点击，触发任何附加事件以及默认行为。

function clicked_twitter_button( anchor_instance ) {
    // Remove the click event to prevent an infinite loop
    anchor_instance.onclick = null;

    // The line below is specified by twitter.
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

    // Click the link again
    anchor_instance.click();
}

但是，在5.0之前的Firefox版本中，可能无法为<a>元素实现click方法。在这种情况下，使用try / catch语句包装调用并触发鼠标事件可能是合适的。

附录

阅读完评论后，对Twitter代码进行了正确的审视，之所以不起作用是因为代码会在文档中添加一个脚本元素，在当前JavaScript完成执行后将下载并执行。唯一的方法是检测何时加载此脚本，然后调用anchor_instance.click()。例如，使用head.js中的脚本加载代码：

function scriptTag(src, callback) {

    var s = doc.createElement('script');
    s.type = 'text/' + (src.type || 'javascript');
    s.src = src.src || src;
    s.async = false;

    s.onreadystatechange = s.onload = function () {

        var state = s.readyState;

        if (!callback.done && (!state || /loaded|complete/.test(state))) {
            callback.done = true;
            callback();
        }
    };

    // use body if available. more safe in IE
    (doc.body || head).appendChild(s);
}

function clicked_twitter_button( anchor_instance ) {
    // Remove the click event to prevent an infinite loop
    anchor_instance.onclick = null;

    // Click the link again after loading the Twitter script
    scriptTag("https://platform.twitter.com/widgets.js", function () {
        anchor_instance.click();
    });
}

现在唯一的缺点是，在获取和解析脚本时单击链接后会有一点延迟。您可能希望将鼠标光标更改为加载图标或其他内容，以防万一。或者你可以放弃这个想法并正常加载脚本。

仅在用户点击时才应用twitter-button javascript

1 个答案:

附录

进一步阅读