1

有没有一种相对干净的方法可以让我获得 twitter 按钮的简单 javascript 版本的所有内置优点，但推迟执行其相当繁重的 javascript，直到用户真正点击按钮？

我在想我可以像这样构建一个锚标签：

<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 的图像在所有平台上都是相同的）。

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

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

谢谢你。

4

1 回答 1

0

您应该能够用来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();
    });
}

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

进一步阅读

于 2014-02-11T08:42:28.103 回答