在HTML渲染完成后加载javascript

load javascript after the html has rendered

本文关键字：加载 javascript HTML      更新时间：2023-09-26

如果p标签放在上面，脚本放在下面，下面的脚本可以很好地工作

<p id="dom_intro">Hello</p> 
<script>
x=document.getElementById("dom_intro");
document.write("<p>This is the text of dom intro" + x.innerHTML + "Howzzat </p>");
</script>

如果相同的代码，其中脚本放置在第一个和html p标签放置在脚本下面，它不工作，我得到错误x是空的或未定义

<script>
x=document.getElementById("dom_intro");
document.write("<p>This is the text of dom intro" + x.innerHTML + "Howzzat </p>");
</script>
<p id="dom_intro">Hello</p>

我尝试将脚本粘贴在外部javascript文件中，并放置在头部部分我得到了同样的错误。是否有javascript或jquery脚本来加载html渲染后的javascript文件

jquery:

$(document).ready(){function(){
//yourcode
});
Javascript

和

window.onload=function(){
//your code
}

jquery中准备好的文档在DOM准备好时执行该函数，这意味着在下载一些图像之前。

窗口。Onload在页面完全准备好时触发，即当所有图像加载完成时。

则需要在dom准备好后访问该元素。你得到这个错误是因为你试图在dom被加载之前访问p标签。

这可能会解决你的问题

window.onload = function(){ 
  // your javascript here
   x=document.getElementById("dom_intro");
   document.write("<p>This is the text of dom intro" + x.innerHTML + "Howzzat </p>");
}

浏览器呈现你的代码，因为他们看到它(线性)。这里的问题是，您的脚本试图访问一些还不存在的东西，所以通常的做法是等到所有DOM元素准备好，然后执行脚本。

请看这里:http://api.jquery.com/ready/

$(document).ready(function() {
  // Handler for .ready() called.
});

相当于调用:

$(function() {
 // Handler for .ready() called.
});

加载JS文件的通常方式是在关闭标签。这样你就可以确保在你所有的html都被加载之前，任何html都不会被下载。

如果你想在执行任何JS之前等待HTML完成加载，你必须这样做:

纯javascript: 

window.onload = function () {
    // do_whatever_you_want
}
Jquery: 

$(document).ready(function() {
    // do_whatever_you_want
}

相关文章：