获取文件中.js脚本以 HTML 格式加载

Getting script in .js file to load in HTML

本文关键字:HTML 格式 加载 脚本 文件 js 获取      更新时间:2023-09-26

我用javascript编写了一个简单的版权脚本,我已经测试了它是否可以正常工作:

<!DOCTYPE html>
<html>
<body>
<p id="footer"></p>
<script type = "text/javascript">
var initialYear = 2016;
var currentYear = new Date().getFullYear();
var yearYext = "null "
if (initialYear == currentYear)
{
	yearText = " " + initialYear + " ";
}
if (initialYear != currentYear)
{
	yearText = " " + initialYear + " - " + currentYear;
}
var copyright = {
    name : "Elliander Eldridge",
    symbol  : ''u00A9',
    year       : yearText,
};
document.getElementById("footer").innerHTML =
 "Copyright " + copyright.symbol + " " + copyright.year + " " + copyright.name 
 + ". All rights reserved.";
</script>
</body>
</html>

(从"运行"按钮中可以看到)

所以我将脚本部分移动到 js/site.js(在网站文件的目录树中),并希望将其加载到所有页面的页脚中。

问题是既不使用这个:

<script src="../js/site.js"></script>

也不是这个:

<script src="../js/site.js">   
<p id="footer"></p>
</script>

做任何事情,我似乎根本找不到加载它的方法。我也尝试将其放在页面的其他部分,但没有成功。我什至尝试将其放入每个页面都应该加载的 css 文件中。

作为旁注,我希望能够从这个文件加载多个脚本,类似于我如何在一个 css 文件中使用多个 css 类,但不确定如何在这里执行此操作。

附言 - 请不要建议我用javascript编写此内容的替代方法。我只需要帮助来加载我已经写过的内容。

您的 js 代码在开始时被调用,甚至在加载 HTML 内容之前并尝试查找 footer ,这显然在页面上尚不存在。

你需要做的就是调用js,一旦DOM准备好了,即HTML被加载了。

<p id="footer"></p>
...
... 
// and at the end of the page
<script src="../js/site.js"> </script>

另一个可能会有所帮助的提示。把你的js代码放在这个周围:

$(document).ready(function() { 
//put your code here
});

哦,还有,这是不正确的

<script src="../js/site.js">   
<p id="footer"></p>
</script>

编辑:

由于您不想使用 jquery,因此请执行以下操作:

document.addEventListener('DOMContentLoaded', function() {
   // put your code here
}, false);

这确保了javascript代码仅在加载DOM后运行