Javascript 在页面加载时将多个HTML页面导入单个div

我正在尝试将多个HTML外部页面导入到单个div中。 示例：我是page1.HTML、page2.HTML等等。我有一段JQuery：

<script type="text/javascript">
$(document).ready(function() {
$('.main').load('page1.html');
});
</script>

$（文档）.ready（函数（）{
$（'.main'）.load（'page1.html'）；
});

这很好，只是我不知道如何添加多个页面，以便在页面加载时导入到同一个div中

---

谢谢我的朋友。

如果您想要倍数，则不能使用load。使用

$。改为获取
，并指定回调以将它们添加到div：

var pages = ['page1.html', 'page2.html', etc..],
    $main = $('.main'),
    doLoad = function () {
        if(pages.length > 0) {
          // use shift to get the next page off the array
          $.get(pages.shift(), function(content) {
              // append content to .main
              $main.append(content);
              // call do load to get the next entry
              doLoad();
          });
        }
    };

doLoad();

创建一个要加载的HTML文件数组，对每个页面使用ajax调用遍历该数组，然后使用jQuery prepend（）将内容放入元素中

var pages=["page1.html","page2.html","page3.html"],
    mainDiv=$(".main");
$.each(pages, function(i,page){
    var newDiv=mainDiv.append("div");
    newDiv.load(page);
});

如果只想加载页面片段（如果处理包含标题标记的完整页面，通常情况下是这样），则load（）将比get（）容易。
使用JQuery.get（）-然后使用返回的响应字符串继续添加到div。为什么不在每页使用一个div？或者iframes？请注意，页面加载后会立即添加，这不一定是页面数组中的顺序。@cristophe:不，不会。这是专门为按数组顺序加载页面而编写的。只有在上一页完成后才能加载下一页，因为ajax请求的成功回调调用了
doLoad
，并且数组像队列一样处理。哦，对了，对不起，我读得太快了。因此，一次加载一个页面会很慢。我还应该注意，这可以通过延迟完成，但这更容易理解：-）