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

Question

我正在尝试将多个 HTML 外部页面导入单个 div。例子：我是page1.HTML，page2.html等等。我有这段 JQuery：

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

这很好用，除了我不确定如何添加多个页面以在页面加载时导入到同一个 div 中。

谢谢我的朋友。

Answer 1

如果你想要倍数，那么你不能使用负载。改为使用$.get并指定回调以将它们添加到 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();

Answer 2

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

如果您只想加载页面片段（如果您处理包含 head 标签的完整页面，通常会出现这种情况）， load() 将比 get() 更容易。

Answer 3

创建要加载的 HTML 文件数组，并使用每个页面的 ajax 调用遍历数组，然后使用 jQuery prepend() 将内容放入元素中。