Apply twitter-button javascript only when user clicks it

Question

Is there a relatively clean way I can get all of the built-in goodness of the simple javascript version of the twitter-button, but defer execution of its rather heavy-duty javascript until the user actually clicks on the button?

I'm thinking that I could build an anchor tag like this:

<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>

and then define a function like: (Note: edited original post, now sets 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 >
}

If I make twitter_button.gif look exactly like the image that the twitter-specified javascript normally inserts, then execution of the twitter-specified javascript will essentially look like a no-op to the user. That should be pretty easy to do (assuming Twitter's image is the same on all platforms).

So, hopefully, the only thing with which I need help is figuring out how to simulate a click of anchor_instance after Twitter's javascript has executed.

My aim is to preserve the nice pop-up (and defaults) that the javascript twitter button supplies.

Thank you.

Answer 1

You should be able to use aElement.click() to simulate a mouse click on the link, triggering any attached events, as well as the default behaviour.

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();
}

In Firefox versions prior to 5.0, however, the click method may not be implemented for <a> elements. In this case, it may be appropriate to wrap the call with a try/catch statement and trigger a mouse event instead.

Addendum

Having read the comments and taken a proper look at the Twitter code, the reason this doesn't work is because the code adds a script element to the document, which will be downloaded and executed after the current JavaScript finishes executing. The only way to do it would be to detect when this script is loaded and then call anchor_instance.click(). For example, using the script loading code from 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();
    });
}

The only downside now is that there will be a small delay after clicking the link while the script is fetched and parsed. You may want to change the mouse cursor to a loading icon or something, just in case. Or you could abandon the idea altogether and load the script normally.

Further reading

• click() - HTML Living Standard
• click method - MSDN
• HTMLElement.click - MDN