Question

我正在使用HTML模板（Jekyll），偶尔也希望在模板的内容中包含脚本。例如，我的页面模板看起来像这样

<body>
  {{ content }}
  <script src="some_library.js"></script>
  <script>
    // general setup stuff
  </script>
</body>

{{ content }}有时可以包括

<script>
  // page-specific code relying on some_library.js and general page setup stuff
</script>

我可以将模板脚本移到模板的头部，但我已多次阅读将<script>放在文档末尾的重要性。我是否可以可靠地确保特定于页面的代码即使首先出现也会持续运行？

我正在使用jQuery，但如果我在模板中包含jQuery，那么它将无法在内容脚本中使用。我尝试在内容脚本周围添加$(window).load函数，但我得到$ is not defined。

Answer 1

你可以直接使用窗口加载事件而不是$（window）.load - 不需要jQuery！

最简单的方法：

window.onload= yourFunction;

A cleaner way将依赖于attachEvent / addEventListener方法：

window.addEventListener ? 
window.addEventListener("load",yourFunction,false) : 
window.attachEvent && window.attachEvent("onload",yourFunction);

（attachEvent适用于较旧的IE版本）

Answer 2

使用jQuery＆＃39; s .ready() function。

来自文档：

当JavaScript提供用于执行代码的load事件时页面呈现，此事件在所有资产之前都不会被触发如图像已被完全接收。

同样来自文档：

$(function() {
    // Handler for .ready() called.
});