javascript代码在HEAD标签中不起作用答案

【问题标题】：javascript code not work in HEAD tagjavascript代码在HEAD标签中不起作用
【发布时间】：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 标记中

标签： javascript html 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 仅在每个图像完成加载后才会触发，等等。