javascript - 在单个发布商页面上提供多个广告小部件

Question

我的主要问题是由于脚本在加载 DOM 之前运行，并且我无法使用 document.ready 事件。欲了解更多详情，请进一步阅读

我正在制作一个广告服务应用程序。我制作了一个小代码片段，将提供给发布商添加到他们的网站上以加载我们的广告。其样本如下:

<div class="my-widget" data-widgetId="1" data-page-url="http://foo.bar/" ></div>
<script src="http://myadserver.exp/js/widget.js"></script>

HTML div 是由其下方的脚本显示广告的位置。该脚本还包含验证在该 div 中添加和填充广告的方法。

var adDiv = document.getElementsByClassName('my-widget')[0];
insertScriptWithSouce('http://myadserver.exp/serve.php?id=' + adDiv.dataset.widgetId);

function fillAds(htmlFromserver) {
    adDiv.innerHTML = htmlFromServer;
}

This is only a example to understand the scenario

现在我的问题是，如果发布商在同一页面上添加多个小部件

该代码看起来像

<div class="my-widget" data-widgetId="1" data-page-url="http://foo.bar/" ></div>
<script src="http://myadserver.exp/js/widget.js"></script>

<div class="my-widget" data-widgetId="2" data-page-url="http://foo.bar/" ></div>
<script src="http://myadserver.exp/js/widget.js"></script>

没有任何自己的html

现在，来自第二个小部件的广告被放置在第一个小部件的 div 中，而第二个小部件保持为空
我也尝试过许多类的循环，但是当每个脚本运行时，它不知道它下面还有另一个小部件，因为它尚未加载到 DOM 中

Note: I can not use ids and jQuery as its forbidden by seniors I also cant use document.ready event as if document fails to load then my ads will not be served

Answer 1

无需使用多个脚本 block ，只需使用一个循环访问页面上广告容器 div 的脚本引用即可。

function fillAd(htmlFromServer, widgetId) {
    var adDivQuery = document.querySelectorAll('[data-widgetId="' + widgetId + '"]');
    if (adDivQuery.length > 0) {
        adDivQuery[0].innerHTML = htmlFromServer;
    }
}

var adDivs = document.getElementsByClassName('my-widget');

for (var i=0, il=adDivs.length; i<il; i++) {
    insertScriptWithSource('http://myadserver.exp/serve.php?id=' + adDivs[i].dataset.widgetId);
}

在这种情况下，insertScriptWithSource() 函数插入的脚本会将第二个参数传递到 fillAd() 函数，其中包含最初传递给它的小部件 ID .