Javascript Adsense将样式标签注入我的页面（在chrome中）

我在一个网站上工作，这个网站非常前端（vue），因此我使用的是异步版本的adsense

在各种浏览器中进行测试时，我注意到chrome中的一个显示问题，在加载广告后，我的页面高度立即发生了变化。几个小时后，我发现在show_ads_impl.js中，它将style=“height:auto！import；”（或类似内容）注入源代码的各个位置

我在任何地方都找不到这方面的帮助，我急切地想找到一个解决方案——这确实对我的项目中的用户体验产生了负面影响

我在adsense支持网站上寻求帮助，但没有得到任何回应

我用javascript中的延迟回调例程成功地删除了广告添加的style属性，但正如您所想象的那样，这导致页面以一种肯定令人不快的方式闪烁

注：除非您从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),

---

对于任何可能在未来偶然发现这一点的人。下面是我是如何以一种我认为足够好的方式“解决”这个问题的

正如我上面所说，谷歌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']
})

---

经过大量的尝试和错误，我找到了一个不需要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>

document.addEventListener（'DOMContentLoaded'，（e）=>{
（adsbygoogle=window.adsbygoogle | |[]）.push（{}）；
}，错）

用

位置：相对将你的AdSense广告包装在
div
中；宽度：100%；最大宽度：100%在上面

在AdSense广告中，添加
位置：绝对；宽度：继承；最大宽度：继承

这对我来说确实有效，但谷歌迟早会打破这种“变通办法”，如果这对你不起作用，试着使用@Sawces-answer

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

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

您可能已经注意到，我将广告代码包装在
DOMContentLoaded
事件中，我添加了它以避免广告溢出。（在更改之前，AdSense会尝试在小空间中放置大广告，更改之后，AdSense会正确计算div宽度并放置适合div的广告）
以下是来自谷歌的相关信息：

以下是工作解决方案：

确保删除数据ad format=“auto”和数据全宽响应=“true”
从你的代码。否则它将无法工作

但在这种情况下，它破坏了对方向改变的反应。什么时候
您在横向加载一页，然后转到纵向-它保持不变
横向广告巨大的宽度和打破了页面。如果你加载为肖像
然后转向景观，保持较小的广告规模。因此，它需要额外的资源
使用javascript或css媒体查询进行黑客攻击

我从我的广告中删除了属性：
data-ad-format=“auto”
现在在这些页面上没有注入样式：
style=“height:auto！important；”“

这一问题不会发生在任何人身上。这可能就是为什么这个问题看起来很孤立，很少被报道的原因，因为大多数广告都有可能出现。
我真的很震惊，这不是一个更常见的问题/投诉。我一定是做错了什么。现在这也发生在Firefox上，而不仅仅是Chrome上（这似乎只有在加载广告时才会发生，我还注意到，如果您使用类似于
height:100vh；
的东西，它总是会替换高度标签；对于我来说，我正在将数据ad format=“fluid”删除为数据ad format=“auto”，并将其修复。）