jQuery解决谷歌广告不显示但使打底广告无法点击问题

早在2019年我初次添加谷歌广告就发现这个不显示但使打底广告无法点击问题，且这个问题只会出现在首屏，但当时打底广告的图片上有网址，即使不能点击，也能起到宣传作用，所以就一直没管。直到最近把打底广告换成西数推荐返利广告，这个问题才不得不解决。

首先我要证明这个问题不是我代码导致的，因为同样的模板，百度联盟广告不显示时打底广告是可以点击的；其次我要证明这个问题只会出现在首屏，这是解决这个问题之后才彻底证明的，当我把首屏的谷歌广告换成百度广告后，原来网页中间部分最下面的谷歌广告载入框架的id是aswift_2，现在成了aswift_1，虽然按页面加载顺序它是第一个谷歌广告，但只要不出现在首屏，就不会出现不显示使打底广告无法点击问题。

确定是谷歌的问题，接下来就解决这个问题，解决思路是：对比显示和不显示时的不同点，用jQuery判断当不同点出现时，彻底隐藏掉谷歌广告外面的盒子，本站谷歌广告所在盒子统一为class="gg"的div。

f12不断展开谷歌广告代码，经过对比发现两个明显的不同点：一是显示时iframe里面的body高度是100%，框架的高度是90px，那么100%的body也就是90px；不显示时iframe里面的body高度是零，如图所示。

二是显示时iframe里面的body多了class="jar"，如上面第一张图中所示。

容易控制的自然是高度，但代码无法直接控制iframe里面的元素，需要用下面的方法。

$(document).ready(function(){
	var $solveh = $("#aswift_1").contents();
	var $solvef = $("#aswift_3").contents();
	$solveh.find("body").addClass("roguegg");
	$solvef.find("body").addClass("roguegg");
	var pargoogle = $(".roguegg").height();
	if(pargoogle=0) {
		$(".gg").css("display","none");
	}
})

原理是先用contents()方法获取框架中每个元素的子节点，在这些子节点中查找body并为其增加类名class="roguegg"，这是为了对多个广告统一操作，再定义一个获取所有body高度的变量，if判断这个变量的值为0时隐藏掉谷歌广告所在的盒子。

上面jQuery代码对应的html代码是：

1. <div class="gg"><iframe id="aswift_1"></iframe></div> 
2. <div class="gg"><iframe id="aswift_3"></iframe></div> 

可以点击代码运行测试工具测试，iframe中body的默认高度是134px，所以将jQuery代码中pargoogle的值改为134可测试效果。

效果没问题，但应用到网页中可能没效果，这是因为谷歌广告加入的dom节点晚于所写的jQuery代码，这个可以用setInterval()方法不断检测节点是否在dom中出现解决。

谷歌广告占着茅坑不拉屎行为简直不要太恶心，如果你不想深究这个问题，可以把谷歌广告换成百度广告，毕竟两个点击才0.21美元，按照现在的汇率算单价不到七毛，还不如百度广告，百度广告高单价的还是比较多一点，而且728*90和300*250的百度广告也不是很丑。