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

【问题标题】：load multiple pages from different domain in different divs using javascript使用javascript在不同的div中从不同的域加载多个页面
【发布时间】：2014-12-31 15:16:02
【问题描述】：

我正在尝试在页面加载时从我页面的 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 中只显示一页。

【问题讨论】：

标签： javascript jquery html cross-domain

【解决方案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);
}

【讨论】：