JavaScript [element].innerHTML = htmlcode 不起作用

Question

渲染window.navigate(strURL);时存在性能时间延迟。在那之前，我想使用 mainContainer.innerHTML = HTMLwait; 显示等待消息，但它不起作用。任何帮助表示赞赏。谢谢!

var HTMLwait = "<div style='width:300px;height:300px;top:40%;left:45%;position:absolute;overflow:auto;display:inline;'><div style='width:50px;height:50px;top:20%;left:4%;position:absolute;overflow:auto;display:inline;'><img src='../../images/Developer/ajax-loader.gif'></div><div style='width:50px;height:50px;top:35%;left:0%;position:absolute;font-family:arial;font-size:12px;color:#000000;'>Loading...</div></div>";

var strURL = window.location.href;

var mainContainer = $(".mainContainer");
if (mainContainer != null) {
  mainContainer.innerHTML = HTMLwait;
}

window.navigate(strURL);

Answer 1

mainContainer 是一个 jQuery 对象，因此没有 innerHTML 属性。要设置通过 jQuery 选择的元素的 HTML，请使用 html()。

请注意，jQuery 对象永远不会为 null。要检查它是否存在，请使用 length 属性。您应该注意，检查元素是否存在是多余的，因为在不包含元素的 jQuery 对象上调用方法时，jQuery 不会抛出错误。

此外，您似乎正在使用 window.location.href 重新加载页面。一个更简单的方法是仅使用 window.location.reload()。

话虽如此，试试这个:

var HTMLwait = "<div style='width:300px;height:300px;top:40%;left:45%;position:absolute;overflow:auto;display:inline;'><div style='width:50px;height:50px;top:20%;left:4%;position:absolute;overflow:auto;display:inline;'><img src='../../images/Developer/ajax-loader.gif'></div><div style='width:50px;height:50px;top:35%;left:0%;position:absolute;font-family:arial;font-size:12px;color:#000000;'>Loading...</div></div>";
var mainContainer = $(".mainContainer").html(HTMLwait);
window.location.reload();

最后，您附加到 DOM 的 HTML 字符串中有很多内联样式。你真的应该避免内联样式。相反，在您附加的元素上放置一个类，然后通过外部样式表设置它们的样式。