首先,预设好你的广告位 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 许可协议。转载请注明出处!