2017-07-26 105 views
2

有时空。我的相关代码如下。的document.getElementById尽管使用我有一个问题,是的document.getElementById有时尽管使用的window.onload返回null(在10-20一次)的window.onload

ptp.html:

<body> 
    <div msa-include-html="msa.html"></div> 
    <script type="text/javascript" src="msa.js"></script> 
    <script type="text/javascript"> 
     includeHTML(); 
    </script> 
    <script type="text/javascript"> 
     window.onload = function() { 
      initForm("urlAction"); 
     } 
    </script> 
</body> 

msa.html:

<form id="msa" method="get"> 
    <input id="input" type="text" name="input" /> 
    <p id="output"></p> 
    <input id="btn" type="submit" value="SUBMIT" /> 
</form> 

msa.js:

includeHTML = function (cb) { 
    var z, i, elmnt, file, xhttp; 
    z = document.getElementsByTagName("*"); 
    for (i = 0; i < z.length; i++) { 
     elmnt = z[i]; 
     file = elmnt.getAttribute("msa-include-html"); 
     if (file) { 
      xhttp = new XMLHttpRequest(); 
      xhttp.onreadystatechange = function() { 
       if (this.readyState == 4 && this.status == 200) { 
        elmnt.innerHTML = this.responseText; 
        elmnt.removeAttribute("msa-include-html"); 
        includeHTML(cb); 
       } 
      } 
      xhttp.open("GET", file, true); 
      xhttp.send(); 
      return; 
     } 
    } 
    if (cb) cb(); 
}; 

function initForm(urlAction) { 
    document.getElementById("msa").action = urlAction; 
    document.getElementById("input").addEventListener("keyup", updateOutput);   
} 

function updateOutput() { 
    var input = document.getElementById("input").value; 
    var output = Number((1/3 * input).toFixed(0)); 
    document.getElementById("output").innerHTML = output.toLocaleString(); 
} 

提前非常感谢。

回答

2

您的includeHTML()函数执行异步操作来获取内容。该函数将返回开始之后的操作,但在取完会后其他代码期望它加载存在于DOM中的内容。

线

if (cb) cb(); 

应该是XHR回调里面,不在外面,你想起来了。就目前而言,回调将在HTTP请求完成之前被调用。我怀疑你的代码只在内容位于浏览器缓存中时才起作用。

相关问题