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在调用不包含Elements的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字符串中有一个 lot 内联样式。你应该真的避免使用内联样式。而是在您追加的元素上放置一个类，然后通过外部样式表对它们进行样式化。

Answer 2

对于jQuery对象，请使用.html()，

$('.mainContainer').html(HTMLwait);

如果您想使用.innerHTML属性：

document.querySelector('.mainContainer').innerHTML = HTMLwait;

＆＃13;

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>";


showMessage(HTMLwait);

function showMessage(message) {

  $('.mainContainer').html(HTMLwait);

  setTimeout(function() {
    console.log('time to reload the page');
    // uncomment line below
    // window.location.reload();
  }, 1000); // executed after one second
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainContainer"></div>

＆＃13;

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

2 个答案: