On Render Callback For G+ Button
- by Michael Robinson
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.
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);
})();
I'd like to know please, if there is either:
A correct way one should do this for G+ buttons
A better implementation that what I've hacked together above
