Javascript不能正常工作

Question

好的，這個很奇怪，我不完全確定如何爲這個特定的問題標題。 我有一個JavaScript功能，應該在文檔準備就緒時發生。 函數的第一部分調用一個函數，該函數在頁面中包含一些添加的html頁面。

下一部分匹配當前URL頁面的最後一部分，並在菜單中找到它們，以便爲它提供選定的類以及菜單項的父項。

代碼工作，但只與

alert(lastpath); 

當警報語句去掉，下面不再起作用線。

$(document).ready(function() { 

     w3IncludeHTML(); 
     lastpath=(window.location.pathname).split("/").slice(-1).pop(); 
     alert(lastpath); 
     $('a[href$="'+lastpath+'"]').attr("class","selected"); 
     $('a[href$="'+lastpath+'"]').parent(".dropdown-content").prev().attr("class","selected"); 

    }); 

有沒有人知道這裏會發生什麼？

Answer 1

在w3Data library負載定義的內容異步函數w3IncludeHTML。它提供了當它已經完成它的工作得到通知沒辦法：

function w3IncludeHTML() { 
    var z, i, a, file, xhttp; 
    z = document.getElementsByTagName("*"); 
    for (i = 0; i < z.length; i++) { 
    if (z[i].getAttribute("w3-include-html")) { 
     a = z[i].cloneNode(false); 
     file = z[i].getAttribute("w3-include-html"); 
     var xhttp = new XMLHttpRequest(); 
     xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
      a.removeAttribute("w3-include-html"); 
      a.innerHTML = xhttp.responseText; 
      z[i].parentNode.replaceChild(a, z[i]); 
      w3IncludeHTML(); 
     } 
     }  
     xhttp.open("GET", file, true); 
     xhttp.send(); 
     return; 
    } 
    } 
} 

一個快速的解決辦法是改變上述功能，下面的代碼添加到您的腳本：

function w3IncludeHTML(callback) { 
    var z, i, file, xhttp; 
    z = document.querySelector("[w3-include-html]"); 
    if (!z) { 
    // notify caller that all is loaded 
    if (callback) callback(); 
    return; 
    } 
    file = z.getAttribute("w3-include-html"); 
    z.removeAttribute("w3-include-html"); 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (xhttp.readyState == 4) { 
     if (xhttp.status == 200) { 
     z.innerHTML = xhttp.responseText; 
     } 
     w3IncludeHTML(callback); 
    } 
    }  
    xhttp.open("GET", file, true); 
    xhttp.send(); 
} 

該版本將覆蓋w3Data庫提供的功能，並對其進行改進。現在，您可以通過一個回調函數來w3IncludeHTML，在其中您可以肯定，所有內容都加載（除非錯誤發生，當然）：

$(document).ready(function() { 
    w3IncludeHTML(function() { 
     // Everything that depends on loaded content, should be done here: 
     lastpath=(window.location.pathname).split("/").slice(-1).pop(); 
     // not needed: alert(lastpath); 
     $('a[href$="'+lastpath+'"]').attr("class","selected"); 
     $('a[href$="'+lastpath+'"]').parent(".dropdown-content").prev().attr("class","selected"); 
    }); 
}); 

Answer 2

您使用的功能從the JS library from w3schools。只要看看他們的代碼：

function w3IncludeHTML() { 
    var z, i, a, file, xhttp; 
    z = document.getElementsByTagName("*"); 
    for (i = 0; i < z.length; i++) { 
    if (z[i].getAttribute("w3-include-html")) { 
     a = z[i].cloneNode(false); 
     file = z[i].getAttribute("w3-include-html"); 
     var xhttp = new XMLHttpRequest(); 
     xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
      a.removeAttribute("w3-include-html"); 
      a.innerHTML = xhttp.responseText; 
      z[i].parentNode.replaceChild(a, z[i]); 
      w3IncludeHTML(); 
     } 
     }  
     xhttp.open("GET", file, true); 
     xhttp.send(); 
     return; 
    } 
    } 
} 

它使用XMLHttpRequest對象，所以我們相信這是一個異步代碼。在你調用這個函數之後，你很可能使用依賴於ajax請求成功的代碼行。當然，這並不好（將異步代碼視爲同步代碼），但由alert函數提供的延遲使其工作（有時;）！）。

解決方案：確保w3IncludeHTML函數做了什麼以及在調用之後如何擺脫同步代碼。或者：嘗試找到一種方法來檢測此功能的ajax部分何時完成。其實，這是正確的有：

 if (xhttp.readyState == 4 && xhttp.status == 200) { 
      a.removeAttribute("w3-include-html"); 
      a.innerHTML = xhttp.responseText; 
      z[i].parentNode.replaceChild(a, z[i]); 
      w3IncludeHTML(); 
     }