Adsense将样式标签注入我的页面（Chrome浏览器） [英] Adsense injecting style tag into my page (in chrome)

问题描述

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

在各种浏览器中进行测试时，我注意到chrome中出现了一个显示问题，其中广告加载后立即更改了我页面的高度。几个小时后，我发现在show_ads_impl.js中，它正在注入style = height：auto！important; （或类似的地方）放在我的源代码中的各个位置。

我在任何地方都找不到解决方法，并且急切地想找到解决方案-这确实影响了用户体验我的项目相当负面。

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

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

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

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

上面文件中的相关代码如下：

  ao& ！c&& && （e.setProperty（ height， auto， important），
d& !! $ v（String（d.minHeight））&& e.setProperty（ min-height ， 0px，重要），
d&！aw（String（d.maxHeight））和e.setProperty（ max-height， none，重要） ））：（Yv（a，1，l，c， height，h，aB，al），
  

解决方案

对于以后可能会遇到此问题的任何人。以下是我如何以自己认为足够好的方式继续解决问题的方法。 / p>

就像我上面所说的那样，google Adsense正在将style = height：auto！important; min-height：0px！important;注入到我网站上的主包装元素中。

下面是我用来解决问题的代码-本质上是取消了AdSense的功能。

  //此代码侦听main-wrapper元素上的突变并将
 //样式属性重置为空。
 //这是必需的，因为Google Adsense一世将样式插入此主包装器
 //更改其height属性的元素。注意：这仅在Chrome中发生。 
 let wrapper = document.getElementById（'main-wrapper'）
 const观察者=新MutationObserver（函数（变异，观察者）{
 wrapper.style.height =''
 wrapper.style.minHeight =''
}）
rator.observe（wrapper，{
属性：true，
 attributeFilter：['style'] 
}） 
  

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

解决方案

For anyone that may stumble on this in the future. Below is how I was able to "solve" the problem in a way that I deemed good enough to move on.

Like I stated above, google Adsense was injecting style="height: auto !important; min-height: 0px !important;" into my primary page wrapper element on my website.

Below is the code I used to solve the problem - essentially undoing what Adsense does.

// 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']
})

这篇关于Adsense将样式标签注入我的页面（Chrome浏览器）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！