gpt4 book ai didi

javascript - 仅当用户单击时应用 twitter-button javascript

转载 作者:行者123 更新时间:2023-11-28 08:32:21 25 4
gpt4 key购买 nike

有没有一种相对干净的方法可以让我获得 Twitter 按钮的简单 javascript 版本的所有内置优点,但推迟其相当繁重的 javascript 的执行,直到用户实际单击该按钮?

我想我可以构建一个像这样的 anchor 标记:

<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 按钮提供的漂亮弹出窗口(和默认值)。

谢谢。

最佳答案

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

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

进一步阅读

关于javascript - 仅当用户单击时应用 twitter-button javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21696755/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com