首先,预设好你的广告位 class
,比如我使用的div:
html<!-- 文章内嵌广告位 -->
<div class="article-ads"></div>
所有js重点操作就是找出页面中的这个div并渲染!
jsvar url;
window.onload = async function () {
url = window.location.href;
// 加载广告组件
await loadGoogleAdsJs();
// 监听网站主体部分,在页面变化时重新渲染广告
listener_body();
}
/**
* 谷歌广告js加载
*/
async function loadGoogleAdsJs() {
let script = document.createElement("script");
script.setAttribute("async", "");
script.setAttribute("crossorigin", "anonymous");
// 记得修改你的脚本参数哦!!!
script.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8842635629279684";
document.body.appendChild(script);
// console.log('loadGoogleAds');
}
/**
* 监听body变化,实现页内刷新广告
*/
async function listener_body() {
// 首次初始化广告
show_ads();
var footers = document.getElementsByClassName("footer-icp-number");
var height = footers[0].offsetTop;
// console.log(height);
// 选择要观察的目标节点
const body = document.body;
// 观察器的配置(需要观察什么变动)
var config = { childList: true };
// 当观察到变动时执行的回调函数
var callback = function (mutationsList, observer) {
let footer = document.getElementsByClassName("footer-icp-number");
var new_height = footer[0].offsetTop;
if (height != new_height) {
height = new_height;
// 页面变化时,重新渲染星空背景,1效果不对,2很卡
// clear_stars();
// show_stars();
// 页面变动时重新加载广告
if (url != window.location.href) {
url = window.location.href;
show_ads();
}
}
};
// 创建一个观察器实例并传入回调函数
var observer = new MutationObserver(callback);
// 用配置文件初始化观察器实例
observer.observe(body, config);
// console.log('listener_body');
}
/**
* 显示广告
*/
async function show_ads() {
initAds = 0;
// 1.文章内广告位设置
let article_ads = document.getElementsByClassName("article-ads");
for (var ad = 0; ad < article_ads.length; ad++) {
article_ads[ad].innerHTML = "<ins class=\"adsbygoogle ads-custome\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-8842635629279684\" data-ad-slot=\"4336551477\"></ins>";
}
// 2.读取所有自定义的广告位
let adsbygoogles = document.getElementsByClassName("ads-custome");
console.log(adsbygoogles.length);
// 3.给所有广告位拉取一遍广告
for (var ad = 0; ad < adsbygoogles.length; ad++) {
(adsbygoogle = window.adsbygoogle || []).push({});
}
// console.log('show_ads');
}
本文作者:DingDangDog
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!