正在加载<head>中的.js文件

Loading .js file in <head>

本文关键字：中的 js 文件 head 加载      更新时间：2023-09-26

所以我是javascript的新手(事实上，一般来说是编程新手)。

我的问题是，我可以考虑加载。js文件在

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

作为加载头文件(像在c/c++)?

我想没有。假设我的script.js看起来像这样:

function copyToClipboard(text) 
{window.prompt("Copy to clipboard: Ctrl+C, Enter", text);}

和我的index.html看起来像这样:

<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<textarea id="a" autofocus="true"></textarea>
<script> onclick=copyToClipboard(document.getElementById("a").value);
</script>
</body>
</html>

它不起作用，也就是说，它没有等待我的单击(这意味着该函数被正确加载-它被成功调用，只是弹出窗口没有等待鼠标事件)。但如果我把脚本内嵌，它工作:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea id="a" autofocus="true"></textarea>
<script>onclick=function copyToClipboard(text) {
  window.prompt("Copy to clipboard:Ctrl+C,Enter",document.getElementById("a").value);
}
</script>
</body>
</html>

第一个代码不起作用的原因是您正在调用copyToClipboard()函数并将返回值分配给onclick变量。在第二段代码中，你正确地为它分配了一个函数引用，而不是立即调用函数。

换句话说:

onclick = copyToClipboard(document.getElementById("a").value);

"调用copyToClipboard()，将返回值(undefined)赋给onclick变量"

onclick = function copyToClipboard(text) { ...

"将copyToClipboard()函数的引用赋值给onclick变量"

要使其与外部脚本中的函数定义一起工作，请将函数调用包装在匿名函数中:

onclick = function() {
    copyToClipboard(document.getElementById("a").value);
};

所有人都称赞javascript误导开发人员错误诊断问题的能力!

这不是定义内联onclick处理程序的方式。内联onclick处理程序是html元素的一个属性(或属性，稍后我们会发现):

<textarea id="a" autofocus="true" onclick="copyToClipboard(this.textContent)"></textarea>

你对<script>标签所做的只是包括一些javascript代码，在浏览器解析你的html时执行:

<script> onclick=copyToClipboard(document.getElementById("a").value);</script>调用你的函数，并将其返回值赋给onclick。

但是等等，为什么第二个代码片段可以工作呢?

这是因为onclick也是dom元素的属性。你也可以给window本身分配一个点击处理程序——这就是你的第二个代码片段实际上在做的事情(多亏了javascript的一个不太酷的特性，它试图给一个未定义的变量赋值，给全局对象的属性赋值)。这意味着无论你在哪里点击，你的新的点击处理程序都会被调用。

至于你的第一个问题，你真的不能说标签就像包含一样——一个脚本不像一个包含的文件，它可以包含的不仅仅是声明和定义。您可以查看一些模块标准/框架，如RequireJS，以获得更多类似的功能。

相关文章：