将CodePen JavaScript放在< head>中而不是< / body> [英] Put CodePen JavaScript in <head> Instead of </body>
问题描述
在使用CodePen时，JavaScript窗格中的JavaScript代码似乎在 < / body> 之前执行。在我的情况下，我的HTML中嵌入了一些< script> 标签，我在其中引用了JavaScript窗格中定义的函数。由于直到 之前 < / body> 才评估JS窗格，我无法在<$ c $中引用这些JS函数c>< script> 元素。
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.
有没有办法告诉CodePen有效，将JavaScript窗格的内容放入< head> 而不是在< / body> 之前？
Is there a way to tell CodePen to effectively, "put the contents of the JavaScript pane in the <head> rather than just before </body>"?
推荐答案
我原本希望能够指定包含JS窗格内容的 where ：在< head> ; 元素或就在关闭< / body> 之前。默认情况下，CodePen会在< / body> 结束之前插入您的JS窗格内容，并且您现在无法做任何事情（2015年7月）。
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).
你可以用一些黑客来解决这个问题。假设您的笔位于：
http://codepen.io/lanshen/pen/j7GB5q （我刚刚提出来了）。您的JS窗格有自己的URL：
http://codepen.io/lanshen/ pen / j7GB5q.js
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
在你的< head> 的东西部分中笔的设置，添加一个引用你的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>
这将导致您的JS窗格内容包含在< head> ; 。这种方法的一个明显问题是，JS窗格的内容仍然包含在< / body> 之前（即，它将被包括两次）。为了解决这个问题，我将我的JS窗格内容组织成一个 if（）/ else（），以便 if（） piece将在< head> 中加载， else 片段将在<$之前加载C $ C>< /体> 。下面是我使用的JS窗格模板。同样，请确保在HTML的Stuff for < head> < script> 标记引用JS窗格c>我上面提到的部分。
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");
}
这是一个用于测试的小HTML窗格：
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>
这篇关于将CodePen JavaScript放在< head>中而不是< / body>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
