在單個發布者頁面上投放多個廣告窗口小部件

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

注意：我不能使用ID和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;
}