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

但是它在最后一个div中只显示了一个页面Widget。

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

使用javascript从不同div中的不同域加载多个页面

1 个答案: