6

我的网页有以下代码：

<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>标签中？

4

6 回答 6

15

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

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

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

</script>
于 2013-03-28T06:48:08.503 回答
4

您的脚本使用 DOM 元素，因此必须在加载 DOM 后运行。你可以通过使用这个函数来做到这一点：

$(document).ready(function(){
    //code here
}
于 2013-12-04T08:38:46.800 回答
2

HTML 页面中的各种标签按照它们在页面上出现的顺序加载和处理。您的<script>标签在<head>. 这是在解析之前<body>和里面的元素。<body>因此，脚本会尝试引用在执行时未定义的元素。

于 2013-03-28T06:44:19.620 回答
2

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

<script>
  $(function(){
    $('#msg1').html(document.URL.toString());
  });
</script>
于 2013-03-28T06:47:52.643 回答
1

我建议这样使用addEventListener：

<script language="javascript" type="text/javascript"> 
document.addEventListener("DOMContentLoaded",() => { 
       document.getElementById("msg1").innerHTML = document.URL.toString();
    });
</script>
于 2020-10-23T15:35:35.910 回答
0

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

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

function myfunc(){  
//code here
}
window.onload = myfunc();
于 2013-03-28T06:47:02.560 回答