AdSense вставляет тег стиля в мою страницу (в Chrome) - PullRequest
Новая
       17

AdSense вставляет тег стиля в мою страницу (в Chrome)

0 голосов
/ 15 апреля 2019

Я работаю над веб-сайтом, который сильно загружен (vue), и поэтому я использую асинхронную версию AdSense.

При тестировании в различных браузерах я заметил проблему с отображением в Chrome, когда высота моей страницы изменялась сразу после загрузки рекламы. Несколько часов спустя я обнаружил, что в show_ads_impl.js он вводит стиль = "высота: авто! Важно;" (или аналогичные) в различные места в моем исходном коде.

Я нигде не мог найти помощь по этому вопросу, и я отчаянно пытался найти решение - это действительно отрицательно влияет на восприятие пользователем моего проекта.

Я попросил помощи на веб-сайте поддержки AdSense и не получил ни одного ответа.

Мне удалось удалить атрибут стиля, добавленный рекламой с помощью процедуры отложенного обратного вызова в моем javascript - но, как вы можете себе представить, это вызвало мерцание страницы, что, безусловно, неприятно.

https://pagead2.googlesyndication.com/pagead/js/r20190408/r20190131/show_ads_impl.js

Обратите внимание, что ссылка выше не будет содержать код "инъекции", если вы не загрузите его из Chrome.

Код в файле выше выглядит так: 

        a.o && !c && f && (e.setProperty("height", "auto", "important"),
        d && !$v(String(d.minHeight)) && e.setProperty("min-height", "0px", "important"),
        d && !aw(String(d.maxHeight)) && e.setProperty("max-height", "none", "important"))) : (Yv(a, 1, l, c, "height", h, a.B, a.l),

1 Ответ

0 голосов
/ 16 апреля 2019

Для тех, кто может наткнуться на это в будущем. Ниже показано, как мне удалось «решить» проблему так, чтобы я посчитал ее достаточно хорошей, чтобы двигаться дальше.

Как я уже говорил выше, Google AdSense вводит стиль = "высота: авто! Важно; мин-высота: 0 пикселей! Важно;" в элемент моей основной страницы на моем веб-сайте.

Ниже приведен код, который я использовал для решения проблемы - по сути, отмена действий Adsense. 

// this code listens for a mutation on the main-wrapper element and resets
// the style attribute back to "null".
// This is necessary because Google Adsense injects style into this main-wrapper
// element changing its height properties. Note: This only occurs in Chrome.
let wrapper = document.getElementById('main-wrapper')
const observer = new MutationObserver(function (mutations, observer) {
  wrapper.style.height = ''
  wrapper.style.minHeight = ''
})
observer.observe(wrapper, {
  attributes: true,
  attributeFilter: ['style']
})
...