document.querySelector пропустить элемент, которого там нет - PullRequest
0 голосов
/ 12 апреля 2020

Я добавляю рекламу на страницы, используя это, у меня есть около 5 объявлений на страницах в каждом элементе. проблема, которую я получаю, заключается в том, что на некоторых страницах все элементы отсутствуют, поэтому я хочу «пропустить» их, если их там нет, в данный момент это поиск первого элемента, добавление рекламы, если следующий Элемент отсутствует на странице, он выдает ошибку и затем не будет показывать рекламу в следующих элементах, которые есть. надеюсь, это имеет смысл?

этот элемент находится на одной странице, но не на других, так как я могу "пропустить его" на страницах, где его нет

document.querySelector("#spacer1").insertAdjacentHTML('afterbegin',........

Полный код с использованием:

//shows the slots on the page
window.addEventListener("DOMContentLoaded", function() {
  document.querySelector(".p-body-inner").insertAdjacentHTML('afterbegin', '<div class="ad-reporter-ahytrfg35423"><div id="advertisement" style="border: 0pt none; margin: auto; text-align: center; color: #999; text-transform: uppercase; font-family: sans-serif; font-size: 9px; font-weight: 400; letter-spacing: .2em; line-height: 1; margin-top: 0px; position: relative; top: -4px;">Advertisement</div><div id="inreedvid13Slot"></div></div><br>');
  document.querySelector("#spacer1").insertAdjacentHTML('afterbegin', '<div class="ad-reporter-ahytrfg35423"><div id="advertisement" style="border: 0pt none; margin: auto; text-align: center; color: #999; text-transform: uppercase; font-family: sans-serif; font-size: 9px; font-weight: 400; letter-spacing: .2em; line-height: 1; margin-top: 0px; position: relative; top: -4px;">Advertisement</div><div id="inreedvid9Slot"></div></div><br><br><br>');
  document.querySelector(".block.block--category.block--category99").insertAdjacentHTML('beforeend', '<br><div class="ad-reporter-ahytrfg35423"><div id="advertisement" style="border: 0pt none; margin: auto; text-align: center; color: #999; text-transform: uppercase; font-family: sans-serif; font-size: 9px; font-weight: 400; letter-spacing: .2em; line-height: 1; margin-top: 0px; position: relative; top: -4px;">Advertisement</div><div id="inreedvid8Slot"></div></div>');
  document.querySelector("#spacer2").insertAdjacentHTML('beforebegin', '<br><div class="ad-reporter-ahytrfg35423"><div id="advertisement" style="border: 0pt none; margin: auto; text-align: center; color: #999; text-transform: uppercase; font-family: sans-serif; font-size: 9px; font-weight: 400; letter-spacing: .2em; line-height: 1; margin-top: 0px; position: relative; top: -4px;">Advertisement</div><div id="inreedvid5Slot"></div></div><br>');
  document.querySelector(".p-breadcrumbs.p-breadcrumbs--bottom").insertAdjacentHTML('afterend', '<br><div class="ad-reporter-ahytrfg35423"><div id="advertisement" style="border: 0pt none; margin: auto; text-align: center; color: #999; text-transform: uppercase; font-family: sans-serif; font-size: 9px; font-weight: 400; letter-spacing: .2em; line-height: 1; margin-top: 0px; position: relative; top: -4px;">Advertisement</div><div id="inreedvid4Slot"></div></div><br>');
  document.querySelector("#adfooter").insertAdjacentHTML('afterbegin', '<br><div class="ad-reporter-ahytrfg35423"><div id="advertisement" style="border: 0pt none; margin: auto; text-align: center; color: #999; text-transform: uppercase; font-family: sans-serif; font-size: 9px; font-weight: 400; letter-spacing: .2em; line-height: 1; margin-top: 0px; position: relative; top: -4px;">Advertisement</div><div id="inreedvid6Slot"></div></div><br>');
});

так что вышеприведенное работает теперь благодаря ответу ниже, высоко ценится: следующая проблема - теперь он выдает ошибки, потому что мой файл prebid пытается разместить «слоты» на странице, где был слот div исключен / пропущен из-за полезного ответа, так что я думаю, что мне нужны логи c, чтобы остановить отправку слотов на страницу, когда этот слот div был исключен? это код, который отправляет слоты из файла prebid:

(window.googletag, window.pbjs, {
definitons: {
inreedvid13Slot: { adUnitPath: "/slotnumber/slotname", size: [[970, 90],[970, 250],[728, 90],[468, 60],[320, 50],[320, 100]], sizeMapping: "mappingleaderslot", timeout: site_config.refresh_rate, },
inreedvid9Slot: { adUnitPath: "/slotnumber/slotname", size: [[300, 600],[300, 250],[250, 250],[160, 600],[120, 600]], sizeMapping: "mappingmenuslot", timeout: site_config.refresh_rate, },
inreedvid5Slot: { adUnitPath: "/slotnumber/slotname", size: [[300, 600],[300, 250],[250, 250],[160, 600],[120, 600]], sizeMapping: "mappingmenuslot", timeout: site_config.refresh_rate, },
inreedvid8Slot: { adUnitPath: "/slotnumber/slotname", size: [[550, 310],[728, 90],[300, 250],[250, 250],[468, 60],[320, 50],[336, 280],[580, 400],[320, 100]], sizeMapping: "mappinginreedvidslot", timeout: site_config.refresh_rate, },
inreedvid4Slot: { adUnitPath: "/slotnumber/slotname", size: [[550, 310],[728, 90],[300, 250],[250, 250],[468, 60],[320, 50],[336, 280],[580, 400],[320, 100]], sizeMapping: "mappinginreedvidslot", timeout: site_config.refresh_rate, },
inreedvid7Slot: { adUnitPath: "/slotnumber/slotname", size: [[550, 310],[728, 90],[300, 250],[250, 250],[468, 60],[320, 50],[336, 280],[580, 400],[320, 100]], sizeMapping: "mappinginreedvidslot", timeout: site_config.refresh_rate, },
inreedvid10Slot: { adUnitPath: "/slotnumber/slotname", size: [[550, 310],[970, 250],[970, 90],[728, 90],[300, 250],[250, 250],[468, 60],[320, 50],[336, 280],[580, 400],[320, 100]], sizeMapping: "mappinginreedvidslot", timeout: site_config.refresh_rate, },
inreedvid6Slot: { adUnitPath: "/slotnumber/slotname", size: [[970, 90],[728, 90],[468, 60],[320, 50],[320, 100]], sizeMapping: "mappingfooterslot", timeout: site_config.refresh_rate, },
},

Могу ли я добавить к нему querySelector, так как когда делаются div на странице в зависимости от того, какие элементы есть, существует класс div = "ad-reporter-ahytrfg35423">, так что я мог бы использовать это, чтобы определить, какие из «слотов» выстрелить?

1 Ответ

1 голос
/ 12 апреля 2020

Вы должны убедиться, что вызов querySelector возвращает что-то, прежде чем пытаться получить доступ.

Для этого вам нужно добавить условие.

Вы также можете использовать массив, чтобы сделать этот процесс более изящным в коде.

Например:

//shows the slots on the page
window.addEventListener("DOMContentLoaded", function() {
  const ads = [
    {
      "selector": ".p-body-inner",
      "location": "afterbegin",
      "html": '<div class="ad-reporter-ahytrfg35423"><div id="advertisement" style="border: 0pt none; margin: auto; text-align: center; color: #999; text-transform: uppercase; font-family: sans-serif; font-size: 9px; font-weight: 400; letter-spacing: .2em; line-height: 1; margin-top: 0px; position: relative; top: -4px;">Advertisement</div><div id="inreedvid13Slot"></div></div><br>',
    },
    // This selector doesn't exist in this snippet and will be skipped by the condition below without crashing...
    {
      "selector": "#spacer1",
      "location": "afterbegin",
      "html": '<div class="ad-reporter-ahytrfg35423"><div id="advertisement" style="border: 0pt none; margin: auto; text-align: center; color: #999; text-transform: uppercase; font-family: sans-serif; font-size: 9px; font-weight: 400; letter-spacing: .2em; line-height: 1; margin-top: 0px; position: relative; top: -4px;">Advertisement</div><div id="inreedvid9Slot"></div></div><br><br><br>',
    },
    // Add your other ads here using similar structure above...
  ];
  ads.forEach(ad => {
    adContainer = document.querySelector(ad.selector);
    if (adContainer) {
      adContainer.insertAdjacentHTML(ad.location, ad.html);
    }
  });
});
<div class="p-body-inner"></div>
...