Put CodePen JavaScript in Instead of
Clash Royale CLAN TAG#URR8PPPPut CodePen JavaScript in <head> Instead of </body>
In using CodePen, the JavaScript code in the JavaScript pane seems to execute just before the </body>. In my case I have some <script> tags embedded in my HTML where I refer to functions defined in the JavaScript pane. Since the JS pane is not evaluated until just before the </body>, I cannot refer to these JS functions in the <script> element.
</body>
<script>
</body>
<script>
Is there a way to tell CodePen to effectively, "put the contents of the JavaScript pane in the <head> rather than just before </body>"?
<head>
</body>
By the way, your functions are accessible by the HTML by default: codepen.io/anon/pen/oXymPB That is, if you define them at the global scope, of course.
– blex
Jul 15 '15 at 17:49
@Blex - The reason your example works is because the function (the button click handler) is not called until the user clicks the button, which cannot occur until the page loads. The code in the JavaScript pane is loaded at the end of the page, so naturally, your example works. What I am trying to do is this: codepen.io/anon/pen/RPJOJP
– Tom Baxter
Jul 15 '15 at 21:38
Why would you insert a script tag randomly in the HTML (not saying you shouldn't, just asking why)? Why not just have one block of script (the one in the JS frame)? It looks like what you're after can only be done by typing it in the <head> box in the popup... JS Fiddle makes it easier though, so it might suit your needs for that matter.
– blex
Jul 15 '15 at 22:07
@Blex - It was all just for testing, to keep thinks simple (for me). I had no intention of ultimately putting <script> tags in my HTML. JSFiddle is nice but you cannot hide panes you're not using as you can w/CodePen.
– Tom Baxter
Jul 16 '15 at 2:15
1 Answer
1
I originally wanted to be able to specify where the JS pane's content is included: In the <head> element or just prior to closing the </body>. By default, CodePen inserts your JS pane content just prior to the close of the </body> and there's nothing you can do about it for now (July, 2015).
<head>
</body>
</body>
There is something of a hack you can use to get around this though. Let's say your pen is at:
http://codepen.io/lanshen/pen/j7GB5q (I just made that up). Your JS pane has its own URL of:
http://codepen.io/lanshen/pen/j7GB5q.js
In the "Stuff for <head>" section in your pen's "Settings", add a tag that refers to your JS pane:
<head>
<script src="//codepen.io/lanshen/pen/j7GB5q.js"></script>
This will cause your JS pane's content to be included in the <head>. The obvious problem with this approach is that the JS pane's content will still be included just prior to the </body> (i.e., it will be included twice). To get around this problem, I structured my JS pane content into an if()/else() so that the if() piece will be loaded in <head> and the else piece will be loaded just prior to </body>. Below is the JS pane "template" I used. Again, make sure you reference the JS pane with a <script> tag in the HTML's "Stuff for <head>" section as I mentioned above.
<head>
</body>
if()/else()
if()
<head>
else
</body>
<script>
<head>
var headLoad;
if(!headLoad) { // when loaded in HEAD, headLoad will be falsey
headLoad = {}; // when loaded before </body>, headLoad will be truthy
(function() {
// PUT YOUR JS TO BE EXECUTED IN HEAD HERE...
alert("I am executing in the HEAD!");
headLoad.doSomething = function(mssg) {
// ...
alert(mssg);
};
})();
} else { // this code is not executed until just prior to </body>
// PUT YOUR JS TO BE EXECUTED PRIOR TO </body> HERE...
alert("The BODY is about to close....");
doSomething = function(mssg) {
alert(mssg);
};
doSomething("789");
}
Here's a little HTML pane to test it out:
<p>ABC</p>
<script>
alert("I am in the HTML script tag.");
headLoad.doSomething("123"); // should alert
// The following will NOT execute because the "else" clause of the
// "if(!headLoad)" will not be executed until just prior to the </body>.
// the global doSomething() function is currently undefined.
doSomething("456"); // will NOT work, nor should it.
</script>
<p>XYZ</p>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Codepen: i.imgur.com/5enXgM7.png / JSFiddle: i.imgur.com/SsJVSQE.png
– blex
Jul 15 '15 at 17:44