Adsense injecting style tag into my page (in chrome)

Question

I am working on a website that is heavily front-end (vue) and thus I am using the async version of adsense.

When testing in various browsers I noticed a display issue in chrome where the height of my page was being changed immediately after ads loaded. Hours later I discovered that within show_ads_impl.js it is injecting style="height: auto !important;" (or similar) into various places in my source code.

I could not find help on this anywhere and am desperate to find a solution - this really impacts the user experience within my project quite negatively.

I asked for help on the adsense support website and did not get a single response.

I was successful at removing the style attribute added by the ads with a delayed callback routine in my javascript - but as you can imagine that caused the page to flicker in a way that is certainly unpleasant.

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

Note the link above will not contain the "injection" code unless you download it from chrome.

The code in question in the file above looks like this:

        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),

Answer 1

经过大量的试验和错误，我找到了一个不需要 JavaScript 的快速解决方法。

<div style="position: relative; width: 100%; max-width: 100%;">
    <ins class="adsbygoogle"
         style="display:block; position: absolute; width: inherit; max-width: inherit;"
         data-ad-client="ca-pub-client-here"
         data-ad-slot="ad-slot-here"
         data-ad-format="auto"></ins>
    <script>
         document.addEventListener('DOMContentLoaded', (e) => {
             (adsbygoogle = window.adsbygoogle || []).push({});
         }, false)
    </script>
</div>

将您的 AdSense 广告包裹在一个divwith中position: relative; width: 100%; max-width: 100%;。

在 AdSense 广告中，添加position: absolute; width: inherit; max-width: inherit;.

它确实对我有用，但谷歌可能迟早会打破这个“解决方法”，如果这对你不起作用，请尝试使用@Sawces答案。

不用担心没有在 div 上设置标记，AdSense 会在广告加载时height自动更改。height

然而这并不完美，因为它是一个绝对的 div，所以广告可能会溢出并导致问题，但至少 Google 不会无缘无故地改变你的整个布局。

您可能已经注意到我将广告代码包装在一个DOMContentLoaded事件中，我添加它是为了避免广告溢出。（更改之前，AdSense 会尝试在较小的空间中放置大广告，更改后，AdSense 会正确计算 div 宽度并放置适合该 div 的广告）

Answer 2

对于任何将来可能会迷失方向的人。以下是我以一种我认为足以继续前进的方式“解决”问题的方法。

就像我在上文所述，google Adsense正在注入style =“ height：auto！important; min-height：0px！important;” 进入我网站上的主页面包装器元素。

下面是我用来解决问题的代码-本质上是撤消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']
})