javascript - 将本地 HTML 加载到 Div(Chrome 扩展)

Question

我没有使用框架，我想实现一个架构，其中单个 html 文件保存布局的骨架，并且某些其他 html 片段加载到该布局中的各个 div 中。代码全部位于我的主扩展文件夹/popup/内的同一目录位置

我想构建一个非常简单的函数来将本地保存的 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 设置为 asynch false。但在此解决方案下，这是必要的，因为脚本中的下一行代码可能/确实会尝试操作新加载的内容。

有什么方法可以达到类似的结果，而不依赖于ajax？ (或者至少，这将解决使用 asynch false 的需要)

注释:

• 我知道有一些框架基本上可以解决这个问题。我喜欢学习如何在没有框架的情况下做事。我并不是在挑战框架的使用，我只是对这个问题中的那些方法不感兴趣。与此相关的是，我想避免使用 jquery(因为这是一个 chrome 扩展，所以使用干净的 JS 进行开发并不是特别痛苦)。
• contact.html 的内容是一些 html，只是一个 html 字符串(即，除了我寻求加载的内容之外，它没有标题或任何内容)。除了离散的 .html 文件之外，我对另一种约定持开放态度，但我喜欢这种约定，因为它很容易组织我的各种页面 block ，并将它们保留为 .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
});