Menu
I was trying to include the Google Plus One button in a Meteor app for collaborative sketching and I noticed that the script tags inside templates are not executed.
<template name="gplus">
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-href="{{url}}"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
console.log("Google Plus button");
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</template>
I got the button to work by moving the script to a separate JavaScript file, but I still wonder why the inline-script didn't work.
I see the script tag on the console, but the script itself doesn't run. How does Meteor do this?
313
Script tags are executed in the order they appear It also means scripts which appear later on the page can depend on things scripts which appear earlier have done. Elements on the page won't render until all the script tags preceding them have loaded and executed.
The best practice is to put JavaScript <script> tags just before the closing </body> tag rather than in the <head> section of your HTML. The reason for this is that HTML loads from top to bottom. The head loads first, then the body, and then everything inside the body.
That's because SCRIPT TAG is not a VOID ELEMENT. In an HTML Document - VOID ELEMENTS do not need a "closing tag" at all!
The “script” tag JavaScript programs can be inserted almost anywhere into an HTML document using the <script> tag. You can run the example by clicking the “Play” button in the right-top corner of the box above. The <script> tag contains JavaScript code which is automatically executed when the browser processes the tag.
Meteor just inserts the contents of the gplus template into the DOM, so of course nothing happens because there is no script execution when elements are added to the DOM.
To fix this you can create a .js file and put it in the client folder, which Meteor will automatically include and execute for you (as well as minify in production).
197
Here is what I do to load the Google +1 Button in my application:
<head> tag of your application.<head>
<!-- Load JS Library -->
<script src="https://apis.google.com/js/platform.js" async="async" defer="defer"></script>
</head>
<template name="myTemplate">
<div data-href="https://hackisition.com/" data-size="medium" class="g-plusone"></div>
</template>
Template.myTemplate.rendered = function() {
return gapi.plusone.go();
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
