如何隱藏路徑位置，當使用外部JavaScript更新HTML與外部文本文件

Question

我正在努力獲得一個動態頁面設置在我的網站上點擊「更多信息」按鈕觸發loadBCW.js腳本更新<div>'使用其他地方保存的文本文件創建innerHTML。我有一個完美的工作使用該loadBCW.js：

document.getElementById("loadBCW").addEventListener('click',function(){ 
var url = "/wp-content/themes/DICE/js/descriptionBCW"; 
var xhttp = new XMLHttpRequest(); 
xhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
    document.getElementById("demo").innerHTML = 
    this.responseText; 
    } 
}; 
xhttp.open("GET", url, true); 
xhttp.send(); 
document.getElementById("demo").innerHTML = url; 
}, false); 

我的問題是，當我點擊爲了改變<div>的innerHTML，它會閃爍變量url中的「詳細信息」按鈕，一個<div>，然後正確的元素覆蓋它。

在實際更新<div>之前，如何指示js不要在屏幕上閃爍變量url？

Answer 1

也許擺脫將div內容設置爲URL的代碼？我已經註釋掉，你應該刪除行：

document.getElementById("loadBCW").addEventListener('click',function(){ 
    var url = "/wp-content/themes/DICE/js/descriptionBCW"; 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
      document.getElementById("demo").innerHTML = 
      this.responseText; 
     } 
    }; 
    xhttp.open("GET", url, true); 
    xhttp.send(); 
    // document.getElementById("demo").innerHTML = url; 
}, false); 

你正在做一個異步請求到外部源，所以xhttp.onreadystatechange內的代碼將不會運行，直到該文件被成功取出。除了優化網站運行速度之外，沒有其他任何事情可以做。所以如果你不希望網址可見，那麼將它放在第一位毫無意義。

然而，這會更糟，如果它是一個同步請求，因爲它不僅將放慢你的表現，但由於document.getElementById("demo").innerHTML = url;是後你的函數，這是保證通過更換帶有URL的內容結束。