仅当用户单击twitter按钮javascript时才应用该按钮

Question

有没有一种相对干净的方法可以让我获得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的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>元素可能无法实现点击方法。在这种情况下，用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();
});
}

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

进一步阅读

• click()-HTML生活标准
• 单击方法-MSDN
• HTMLElement.click-MDN