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

jQuery的對象使用.html()，

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

如果你想使用.innerHTML屬性：

document.querySelector('.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>"; 
 

 

 
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 
 
}

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

Answer 2

mainContainer是一個jQuery對象，並且因此不具有innerHTML屬性。要設置通過jQuery選擇的元素的HTML，請使用html()。

請注意，一個jQuery對象將永遠不會爲空。要檢查它是否存在，請使用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字符串很多。你應該真的避免內聯樣式。而是在你追加的元素上放置一個類，然後通過外部樣式表對其進行設置。