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

Is there a way to tell CodePen to effectively, "put the contents of the JavaScript pane in the <head> rather than just before </body>"?

Answers:

Answer

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

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:

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

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>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.