將本地HTML加載到Div（Chrome擴展程序）中

Question

我沒有使用框架，而是想實現一種架構，在該架構中，單個html文件可容納布局的框架，而某些其他html代碼段則會加載到該布局的各個div中。 代碼都在我的主擴展文件夾/ p​​opup /中的相同目錄位置中

我想構建一個非常簡單的函數，將本地保存的html代碼片段加載到div元素中。 這是我的第一次嘗試：

function loadView(viewName,destination){
    var URL = "/popup/"+viewName;
    var client = new XMLHttpRequest();
    client.open('GET', URL, false);
    client.onreadystatechange = function() {
        document.getElementById(destination).innerHTML = client.responseText;
    }
    client.send();  
}

// Example of a call

loadView('contact.html','widgetBox');

顯然，這很可怕，因為它依賴於將ajax設置為false。 但是在此解決方案下，這是必需的，因為腳本中的下一行代碼可能/確實會嘗試操縱新加載的內容。

不依賴於ajax的達到類似結果的方法是什么？ （或至少，這將解決使用asynch false的需求）

筆記：

• 我知道有一些基本上可以解決這個確切問題的框架。 我喜歡學習沒有框架的情況。 我沒有挑戰框架的使用，我只是對這個問題中的那些方法不感興趣。 相關地，我想避免使用jquery（並且由於這是一個chrome擴展，因此在干凈的JS中開發並不是特別痛苦）。
• contact.html的內容是一些html，只是一個html字符串（即，除了我要加載的內容之外，它沒有標題或任何其他內容）。 除離散的.html文件外，我還接受另一種約定，但我喜歡這種約定，因為它可以輕松組織各種頁面塊，並且將它們保留為.html文件使我可以輕松地以html格式很好地閱讀它們。

Answer 1

您應該讓您的loadView函數接受回調作為第三個參數。 然后，在Ajax調用完成時調用它。 這樣，您可以使用異步請求。

function loadView(viewName, destination, callback){
    var URL = "/popup/"+viewName;
    var client = new XMLHttpRequest();
    client.open('GET', URL);
    client.onreadystatechange = function() {
        if (client.readyState < 4) return; // Wait until the request completes
        document.getElementById(destination).innerHTML = client.responseText;
        callback();
    }
    client.send();  
}

// Example of a call

loadView('contact.html', 'widgetBox', function() {
    // Do whatever comes next
});