嵌入AdSense代码块后动态HTML博客内容异常，移动端适配问题求助

嘿，这个问题我之前帮好几个做博客的朋友排查过，核心就是动态内容场景下AdSense的初始化时序在移动端和桌面端的差异导致的。咱们一步步来解决：

先搞清楚问题出在哪 #

• 桌面端DOM渲染节奏慢，$(document).ready()触发时，你的动态博客内容和AdSense容器大概率已经就位了，所以adsbygoogle.push()能正常工作。
• 移动端的浏览器解析DOM、渲染内容的速度快得多，ready事件触发的时候，可能你的动态内容还没完全插入到DOM里，或者AdSense的容器元素还没被创建，这时候调用push自然就无效了，甚至可能干扰内容渲染。

具体解决方案，按优先级来 #

1. 别再依赖全局的$(document).ready()了，监听动态元素的插入 #

换成监听你的博客内容容器的DOM变化，确保AdSense容器真的存在后再初始化：

// 用MutationObserver监听，比老的DOMNodeInserted性能好太多
const blogContainer = document.getElementById('blog-content');
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.addedNodes.length) {
      const adBlock = document.querySelector('.adsbygoogle');
      if (adBlock) {
        (adsbygoogle = window.adsbygoogle || []).push({});
        observer.disconnect(); // 初始化完就停，避免重复触发
      }
    }
  });
});

// 开始监听博客容器的子元素变化
observer.observe(blogContainer, { childList: true, subtree: true });

如果你的jQuery版本比较旧，也可以用DOMNodeInserted事件，但记得要加判断避免重复触发：

$('#blog-content').on('DOMNodeInserted', function() {
  if ($('.adsbygoogle').length && !$(this).data('adInitialized')) {
    (adsbygoogle = window.adsbygoogle || []).push({});
    $(this).data('adInitialized', true);
  }
});

2. 给AdSense容器加移动端适配的CSS #

有时候不是JS的锅，是CSS导致广告块把内容挤没了：

.adsbygoogle {
  display: block !important;
  margin: 1.5em auto;
  max-width: 100%;
  overflow: hidden;
  /* 避免广告元素超出视口，把内容推到不可见区域 */
}

另外，去AdSense后台检查下你的广告单元类型，一定要选响应式广告，别用固定尺寸的，不然移动端屏幕小的时候广告会撑爆容器。

3. 调整动态内容和AdSense的加载顺序 #

别同时渲染内容和插入广告，先把博客内容完全渲染到DOM里，再插入AdSense代码并初始化：

// 先渲染博客内容
function loadBlogContent(blogData) {
  const contentHtml = generateBlogHtml(blogData); // 你的内容生成函数
  $('#blog-content').html(contentHtml);
  // 内容渲染完再插广告
  insertAndInitAdSense();
}

function insertAndInitAdSense() {
  const adHtml = `
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-你的客户端ID"
         data-ad-slot="你的广告位ID"
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>
  `;
  $('#blog-content').append(adHtml);
  // 立即初始化
  (adsbygoogle = window.adsbygoogle || []).push({});
}

4. 防止重复初始化广告 #

如果你的博客有分页、加载更多的功能，要避免多次调用adsbygoogle.push()，不然会导致广告异常：

let isAdInitialized = false;

function initAdSense() {
  if (!isAdInitialized && document.querySelector('.adsbygoogle')) {
    (adsbygoogle = window.adsbygoogle || []).push({});
    isAdInitialized = true;
  }
}

最后再排查下这几点 #

• 打开Chrome的设备模拟器（F12后点手机图标），查看控制台有没有AdSense相关的报错，比如adsbygoogle is not defined或者找不到容器的错误，这些都是直接的线索。
• 去AdSense后台检查下你的广告单元设置，有没有限制只在桌面端展示。

内容的提问来源于stack exchange，提问作者Saifullah Aslam