javascript代码在HEAD标签中不起作用
Posted
技术标签:
【中文标题】javascript代码在HEAD标签中不起作用【英文标题】：javascript code not work in HEAD tag 【发布时间】：2013-03-18 12:45:07 【问题描述】：我的网页代码如下：
<html>
<head>
<title>This is test Page</title>
<script language="javascript" type="text/javascript">
document.getElementById("msg1").innerHTML = document.URL.toString();
</script>
</head>
<body>
<div class="sss">
<p id="msg1"></p>
</div>
</body>
</html>
正如你现在在脚本执行时 div 不存在，但我只想将我的 JavaScript 代码放在 <head> 标记中，我不会把它放在 HTML 代码的中间。
但只有当我将<script> 标记放在<div> 标记之后时，此代码才有效。
我使用 VS2010 和 firefox 19.0.1
有没有办法把代码放在<head>标签里？
【问题讨论】：
此时不存在任何元素。 身体在头部之后加载。因此，您头脑中的脚本无法在您的身体中找到元素。将脚本标签放在正文的末尾或等待正文触发的 onload 事件执行代码。 没错。脚本执行 div 的时间不存在。尝试耦合一种机制，例如在悬停 div 元素时调用脚本，或者可能是一个明确表示“获取 URL”的按钮。您要么维护订单，要么在特定事件中调用您的脚本。 @elclanrs: 我知道，但我想把所有 javascript 代码放在 HEAD 标记中 【参考方案1】：HTML 页面中的各种标签按照它们在页面上出现的顺序加载和处理。您的<script> 标记在<head> 中解析时会立即执行。这是在 <body> 和 <body> 内的元素被解析之前。因此，脚本会尝试引用在执行时未定义的元素。
【讨论】：
【参考方案2】：您的脚本使用 dom 元素，并且必须在 dom 加载后运行。
将代码封装在一个函数中，并在 dom 加载后调用它
function myfunc()
//code here
window.onload = myfunc();
【讨论】：
【参考方案3】：Michael Geary 是对的，为了执行您的代码，我将使用 jQuery 库（JS 开发中的事实标准）并利用 DOM 就绪事件。这将确保处理程序中的代码在 DOM 完全加载后执行。
<script>
$(function()
$('#msg1').html(document.URL.toString());
);
</script>
【讨论】：
tnx 用于 jQuery，但我想使用 javascript 本身......不是第三方库......但如果有一次我想在我的页面中使用 jQuery，我肯定会使用你的代码！ 现在是 2018 年，所有现代浏览器都支持文档ready 事件。所以不再需要使用 jQuery 了。【参考方案4】：
您的脚本依赖于准备好的 DOM，因此您只需要在 DOM 准备好后执行该函数调用。
<script language="javascript" type="text/javascript">
window.onload = function()
document.getElementById("msg1").innerHTML = document.URL.toString();
</script>
【讨论】：
【参考方案5】：您的脚本使用 DOM 元素，因此必须在 DOM 加载后运行。 你可以使用这个函数来做到这一点：
$(document).ready(function()
//code here
【讨论】：
这是一个 jQuery 解决方案，但没有迹象表明在问题中使用 jQuery，也没有在答案中提到它。这可能会误导阅读此答案的人。【参考方案6】：我建议像这样使用addEventListener：
<script language="javascript" type="text/javascript">
document.addEventListener("DOMContentLoaded",() =>
document.getElementById("msg1").innerHTML = document.URL.toString();
);
</script>
【讨论】：
你能解释更多吗？？ o 使用节点捕获文档的加载 我建议您使用 DOMContentLoaded，而例如 window.onload 仅在每个图像完成加载后才会触发，等等。以上是关于javascript代码在HEAD标签中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript 调用`setTimeout` 在 Oracle Apex 中不起作用