CODEWITHSUNDEEP
javascriptgoogle-plussocial-media
Michael Robinson
Michael Robinson

Reputation: 29498

On Render Callback For G+ Button

How might I go about performing an action only when a G+ button has finished rendering?

Facebook allows one to do this using the following:

FB.XFBML.parse(document, function() {
    alert('rendering done');
});

I've perused Google's documentation, but didn't see anything helpful.

Current Workaround

Currently my workaround is to monitor the G+ element until certain elements have been added, then perform my action:

(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js';

    po.onload = function() {
        var awaitRender = function(element) {
            if (element.firstChild &&
                element.firstChild.firstChild &&
                element.firstChild.firstChild.tagName.toUpperCase() === 'IFRAME') {
                alert('rendered!');
            } else {
                window.setTimeout(function() { awaitRender(element) }, 100);
            }
        };

        var buttons = document.getElementsByClassName('googleplus-button');
        for(var i = 0; i < buttons.length; i++) {
            awaitRender(buttons[i]);
        }
    }
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(po, s);
})();

The Question

I'd like to know please, if there is either:

Upvotes: 4

Views: 322

Answers (1)

Petah
Petah

Reputation: 46040

Try attaching an onload callback to the iframe.

You might need to bump the src attribute incase the iframe is loaded before you attach the onload callback.

Upvotes: 2

Related Questions