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文件之外的另一个约定开放，但是我喜欢这个约定，因为它很容易保持我的各种页面块的组织，并且将它们保存为.html文件允许我很容易地在格式化html的内容中阅读它们。 / LI>

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
});

将本地HTML加载到Div（Chrome扩展程序）

1 个答案: