Question

我的网页包含以下代码：

<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>代码？

Answer 1

您的脚本依赖于DOM准备就绪，因此您只需在DOM准备就绪后才能执行该函数调用。

<script language="javascript" type="text/javascript">

window.onload = function() {
    document.getElementById("msg1").innerHTML = document.URL.toString();
}

</script>

Answer 2

您的脚本使用DOM元素，因此必须在加载DOM后运行。您可以使用此功能执行此操作：

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

Answer 3

Michael Geary是对的，为了执行你的代码，我使用jQuery库（JS开发中的事实标准）并利用DOM ready事件。这将确保一旦DOM完全加载，处理程序中的代码就会执行。

<script>
  $(function(){
    $('#msg1').html(document.URL.toString());
  });
</script>

Answer 4

HTML页面中的各种标签按照它们在页面上显示的顺序加载和处理。在<script>中解析时，会立即执行<head>标记。这在<body>之前，并解析<body>内的元素。因此，脚本会尝试引用在执行时未定义的元素。

Answer 5

您的脚本使用dom元素，必须在加载dom后运行。

将代码包装在函数中并在加载dom后调用它

function myfunc(){  
//code here
}
window.onload = myfunc();

Answer 6

我建议像这样使用addEventListener：

<script language="javascript" type="text/javascript"> 
document.addEventListener("DOMContentLoaded",() => { 
       document.getElementById("msg1").innerHTML = document.URL.toString();
    });
</script>

javascript代码在HEAD标记中不起作用

6 个答案: