Question

我遇到一个问题，即尽管使用window.onload，document.getElementById有时会在10-20中返回null。我的相关代码如下。

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();
}

非常感谢提前。

Answer 1

您的@UserName函数执行异步操作来获取内容。该函数将在启动该操作后返回，但是在之后，获取将完成，其他代码期望它加载的内容存在于DOM中。

该行

includeHTML()

应该在XHR回调中，而不是在你现在已经得到它之外。就目前而言，将在HTTP请求完成之前调用回调。您的代码仅在内容位于浏览器缓存中时才有效，我怀疑。

尽管使用window.onload，document.getElementById有时为null

1 个答案: