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

IT技术 javascript html head
2021-03-18 15:01:06

我的网页有以下代码:

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

6个回答

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

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

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

</script>

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

$(document).ready(function(){
    //code here
}
这是一个 jQuery 解决方案,但没有在问题中使用 jQuery 的迹象,您也没有在答案中提到它。这可能会误导阅读此答案的人。
2021-05-10 15:01:06

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

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

<script>
  $(function(){
    $('#msg1').html(document.URL.toString());
  });
</script>
tnx for jQuery 但我想使用 javascript 本身......不是第三方库......但如果有一次我想在我的页面中使用 jQuery 我当然会使用你的代码!
2021-05-18 15:01:06
现在是 2018 年,所有现代浏览器都支持文档ready事件。所以不再需要为此使用 jQuery。
2021-05-19 15:01:06

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

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

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