在单个发布商页面上投放多个广告小部件

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

没有多个脚本块，只有一个循环遍历页面上广告容器 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。

Answer 2

没有找到解决方案，但仍然找到了最佳解决方案，所以我认为它可能对其他人有所帮助

这个javascript可以用来解决

var adDiv = document.querySelectorAll('my-widget:not([id])');
adDiv = adDiv[0];
adDiv.id = 'my-id' + (Math.random() * 100).toFixed(0);
insertScriptWithSouce('http://myadserver.exp/serve.php?id=' + adDiv.dataset.widgetId + '&origId=' + adDiv.id);

function fillAds(htmlFromserver, idSentFromHere) {
    adDiv = document.getElementById(idSentFromHere);
    adDiv.innerHTML = htmlFromServer;
}

在单个发布商页面上投放多个广告小部件

Serving multiple ad widgets on a single publisher page

html

javascript

dom

ads