Question

我正在创建一个函数alerts()并在我的脚本标记中调用它，即<head> 实际上我正在使用实时编辑器，因此我必须将用户代码置于头部，通常所有函数调用都在头部但是在这里，它显示错误！我想保留用户代码并在DOM完成时运行！像：

HTML

   <head>
     <script src='alertResource.js' type ='text/javascript' ></script>

      <script>

          alerts();

      <script>

  </head>

alertResource.js

 function alerts(msg) {
    var _M_DoWn = { x: '', y: '', isdown: '' };
    var _A = document.createElement('HTML_alert');
     _A.id = "codeit_HTML_alert";

     insertAfter(document.body, _A);

 }

  function insertAfter(refrNode, newNode) {
   refrNode.parentNode.insertBefore(newNode, refrNode.nextSibling);
  }

因此，每当我调用alerts()时，它都会在我的控制台中显示错误：

错误

未捕获的TypeError：无法读取null的属性'parentNode'

我猜错误的出现是因为我的函数在加载DOM之前被调用了。现在我想做一些事情：延迟任何函数调用，直到DOM准备好。根据我的情况，我知道如何检查readystate但无法实现它。

有什么想法吗？我需要做些什么来实现这个目标？

Answer 1

在页面完全加载后使用以下方法调用您的函数：

使用JavaScriopt

document.addEventListener('DOMContentLoaded', function() {
     alerts();
}, false);

<小时/> 使用JQuery

$(function(){
     alerts();
});

Answer 2

当您调用“警报”时，文档未完全加载，“refrNode.parentNode”返回null。

试试这个，不用jQuery

<body onLoad="alerts();">
....
</body>

Answer 3

请使用此。（Javascript方式）

window.onload=function(){SomeJavaScriptCode};
<body onload="SomeJavaScriptCode">

Answer 4

根据您是否需要支持IE8，您可以这样做：

document.addEventListener('DOMContentLoaded', function(){
  alerts();
});

如何在document.body不返回完成之前保持被调用的函数

4 个答案: