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

这只是了解情景的一个例子

现在问题是，发布商是否在同一页面上添加了多个小工具

该代码看起来像

<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中

注意：我不能使用ids和jQuery作为老年人禁止的我也无法使用document.ready事件，因为如果文档无法加载，那么我的广告将无法投放

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

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

2 个答案: