Question

在使用CodePen时，JavaScript窗格中的JavaScript代码似乎在 </body>之前执行。在我的例子中，我的HTML中嵌入了一些<script>标签，我在其中引用了JavaScript窗格中定义的函数。由于直到 </body>之前才评估JS窗格，我不能在<script>元素中引用这些JS函数。

有没有办法有效地告诉CodePen，“将JavaScript窗格的内容放在<head>而不是</body>之前”？

Answer 1

我原本希望能够指定其中包含JS窗格的内容：在关闭之前的XML元素或中<head>。默认情况下，CodePen会在</body>结束之前插入您的JS窗格内容，而且您现在无法做到这一点（2015年7月）。

你可以用一些黑客来解决这个问题。让我们说你的笔在： http://codepen.io/lanshen/pen/j7GB5q（我刚刚提出来）。您的JS窗格有自己的URL： http://codepen.io/lanshen/pen/j7GB5q.js

在＆＃34; </body>＆＃34;的内容中笔中的部分＆＃34;设置＆＃34;，添加一个引用您的JS窗格的标记：

<head>

这将导致您的JS窗格内容包含在<script src="//codepen.io/lanshen/pen/j7GB5q.js"></script>中。这种方法的明显问题是，JS窗格的内容仍然仍然包含在<head>之前（即，它将被包含两次）。为了解决这个问题，我将我的JS窗格内容组织成</body>，以便在if()/else()中加载if()部分，并且<head>部分将在之前加载到else。下面是JS窗格＆＃34;模板＆＃34;我用了。同样，请确保在HTML＆＃34;＃</body>＆＃34;的内容中引用带有<script>标记的JS窗格。如上所述。

<head>

这是一个用于测试的小HTML窗格：

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"); }

放入CodePen JavaScript代替

1 个答案: