翻页广告应插在每章HTML末尾、“下一页”按钮后的语义化容器中，即之后立即插入，其高度固定为100px、margin-top: 16px、overflow: hidden，并禁止pointer-events，广告内容须委托至子元素触发，同时用IntersectionObserver延时500ms上报真实曝光。
翻页广告该插在 DOM 的哪个位置才不影响阅读体验
翻页广告必须紧贴「下一页」按钮之后、且在视口底部安全区之上，否则用户滑动到页尾时会突然被遮挡内容或触发误触。常见错误是把广告塞进 底部或用 position: fixed 覆盖整个页面底部——这会导致小说正文被压缩、行高错乱，甚至触发 iOS Safari 的地址栏自动展开逻辑，造成滚动跳变。
正确做法是：在每章 HTML 的末尾、<div class="next-btn"> 元素后，插入一个带明确高度和语义的容器：
<pre class="brush:php;toolbar:false;"><div class="ad-page-turn" data-ad-loaded="false">
<div class="ad-placeholder"></div>
</div></pre>
<p>这个 <code>ad-page-turn 必须设置 margin-top: 16px（留出呼吸空间），高度固定为 100px（适配主流广告联盟返回的 banner 尺寸），并禁止内部元素撑开容器（overflow: hidden）。
如何避免广告加载阻塞小说内容渲染
广告脚本（如百度网盟、穿山甲、广点通）默认同步加载，一旦 CDN 延迟或返回空响应，整个页面会卡在「白屏」或「按钮不可点」状态。不能把 <script src="xxx.js"></script> 直接写在 HTML 里。
立即学习“前端免费学习笔记（深入）”；
必须用动态加载 + 超时兜底：
- 用
document.createElement('script')创建 script 标签，设置async=true - 绑定
onload回调，在回调里调用广告 SDK 的showAd()或renderAd() - 加
setTimeout5s 后检查data-ad-loaded属性，未加载则插入纯静态占位图（如 100×100 的灰色 SVG） - 严禁在
window.onload或DOMContentLoaded里串行等待广告——小说正文必须先可读
为什么不能用 iframe 套第三方广告代码
多数小说站用 iframe 加载广告，看似隔离，实则埋雷：iOS 微信内置浏览器对 iframe 内 scroll 事件监听极不敏感，导致「翻页后广告不刷新」；Android 某些定制 ROM 会直接拦截 iframe 中的 document.write，报错 DOMException: Blocked a frame with origin ...。
更关键的是性能：每个 iframe 都是独立 JS 上下文 + 渲染进程，3 章小说页若各带 1 个 iframe 广告，内存占用飙升 40%+，低端机滑动直接掉帧。
替代方案只有两个：
- 用广告平台提供的「无 iframe」JS SDK（如穿山甲的
ttWebSdk，需申请白名单） - 服务端渲染广告 HTML 片段（通过 Node/PHP 请求广告 API 获取预渲染 HTML，再注入到小说页中），规避所有客户端执行风险
移动端点击区域与防误触怎么处理
广告容器本身不能响应 click，否则用户想点「下一页」却触发广告跳转。必须把真实广告点击委托给子元素，并严格限制热区：
-
.ad-page-turn设置pointer-events: none - 广告内容包裹在
<div class="ad-ctn"> 内，该元素设 <code>pointer-events: auto，且宽高严格等于广告素材（如 320×100） - 在广告下方加
12px透明间隔层（<div class="ad-gap"></div>），防止手指从按钮滑到广告时连带触发 - 监听
touchstart，若 300ms 内未触发touchend，则取消本次广告曝光上报（防悬停误判）
广告曝光上报必须延时 500ms 触发，且只在用户真正「看到广告区域进入视口」时才计数（用 IntersectionObserver 监听 .ad-ctn 的 isIntersecting === true）。
翻页广告最麻烦的从来不是「怎么加」，而是「怎么让广告存在感刚好低到用户不反感、又高到广告主认可曝光有效性」——这两边的边界，得靠真机反复测滑动节奏、停留时长、误触率才能调准。
