javascript - Adsense 将样式标签注入(inject)我的页面(在 chrome 中)

Question

我在一个大量使用前端 (vue) 的网站上工作，因此我使用的是异步版本的 adsense。

在各种浏览器中进行测试时，我注意到 chrome 中的显示问题，我的页面高度在加载广告后立即发生变化。几个小时后，我发现在 show_ads_impl.js 中它注入(inject)了 style="height: auto !important;"(或类似的)到我的源代码中的不同位置。

我在任何地方都找不到这方面的帮助，迫切希望找到解决方案 - 这确实对我的项目中的用户体验产生了相当负面的影响。

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

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

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

请注意，除非您从 chrome 下载，否则上面的链接将不包含“注入(inject)”代码。

上面文件中的相关代码如下所示:

        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

对于将来可能偶然发现此问题的任何人。以下是我如何以一种我认为足以继续前进的方式“解决”问题。

就像我上面所说的，谷歌 Adsense 正在注入(inject) 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']
})