使用 JavaScript 在不同 div 中加载来自不同域的多个页面

Question

我正在尝试在页面加载时从页面div内的不同域加载一个或多个页面。每个页面都将加载到单独的div 中。

我可以使用jquery来做到这一点，

但我不想使用javascript来做到这一点，这样我就不必添加jquery脚本，因为我没有在我的项目中任何地方使用jquery。

下面是 jquery 代码

$(".Widget").each(function () {   
    var url = $(this).attr("data-url");
    $(this).load(url, function (response, status, xhr) {
        if (status == "error") {
            alert("There was an error: " + xhr.status + " " + xhr.statusText);
        }
    });
});

我有等效的JavaScript代码

var widgets = document.getElementsByClassName('Widget');
for (var i = 0, len = widgets.length; i < len; i++) {
    debugger;
    var widget = widgets[i];
    var xhr = new XMLHttpRequest();
    xhr.onload = function () {
        widget.innerHTML = this.response;
    };
    xhr.open('GET', widget.getAttribute("data-url"), true);
    xhr.send();
}     

但它在最后一个具有类Widget的div 中仅显示一页。

Answer 1

以下代码对我有用

我创建了一个单独的函数加载

function load(url, element) {
    req = new XMLHttpRequest();
    req.open("GET", url, false);
    req.send(null);
    element.innerHTML = req.responseText;
}

并在 for 循环中调用该函数

var widgets = document.getElementsByClassName('Widget');
for(var i = 0, len = widgets.length; i < len; i++) {
    var widget = widgets[i];
    load(widget.getAttribute("data-url"),widget);
}