如何实现用户点击JavaScript或iframe广告后显示下一步按钮？

不需要依赖广告联盟的特殊回调接口，纯前端逻辑就能覆盖JS渲染、iframe形式两种广告的点击检测，不会干扰广告本身的跳转、计费流程。

步骤1：调整页面结构，预留按钮元素 #

在你现有的广告代码基础上，新增一个默认隐藏的「下一步」按钮，初始设置为不占页面空间，代码示例：

<!-- 原有广告代码 -->
<div id="adm-container-15022"></div>
<script type="text/javascript" src="//moonads.net/display/items.php?15022&647&728&90&4&0&0"></script>

<!-- 新增的默认隐藏下一步按钮 -->
<button id="next-step-btn" style="display:none; margin-top:16px; padding:8px 24px; background:#165DFF; color:#fff; border:none; border-radius:4px; cursor:pointer;">
  下一步
</button>

步骤2：绑定两类广告的点击监听逻辑 #

针对JS动态渲染的同域广告、跨域iframe广告分别做监听，覆盖所有投放形式：

• 对同域JS渲染的广告，用事件委托绑定在你自己写的广告容器上，哪怕广告脚本后续动态重绘DOM，也不会导致监听失效
• 对跨域iframe形式的广告，用「焦点变化检测」的通用逻辑，不需要获取iframe内部权限，就能准确判定用户是否点击了广告块

对应的核心JS代码：

const adContainer = document.getElementById('adm-container-15022');
const nextStepBtn = document.getElementById('next-step-btn');

// 统一触发展示按钮的方法
function triggerShowNextBtn() {
  nextStepBtn.style.display = 'inline-block';
}

// 1. 监听JS渲染广告的内部点击
adContainer.addEventListener('click', () => {
  triggerShowNextBtn();
});

// 2. 监听跨域iframe广告的点击
// 原理：点击广告跳转时页面会失焦，切回页面时判定为发生过广告点击
window.addEventListener('blur', () => {
  const currentActiveDom = document.activeElement;
  // 判定失焦前的焦点是不是落在广告容器内的iframe上
  const isAdIframeClick = currentActiveDom?.tagName === 'IFRAME' 
    && adContainer.contains(currentActiveDom);
  
  if (isAdIframeClick) {
    setTimeout(() => {
      // 等用户从广告页切回原页面时展示按钮
      window.addEventListener('focus', function focusListener() {
        triggerShowNextBtn();
        // 移除一次性监听，避免后续正常页面切换重复触发
        window.removeEventListener('focus', focusListener);
      });
    }, 10);
  }
});

落地注意事项 #

• 不要直接修改广告返回的DOM节点属性，容易触发广告联盟的反作弊检测，导致广告展示异常
• 不要在广告跳转逻辑里加拦截代码，避免影响广告正常计费
• 如果页面有多个同类型广告，可以把容器id抽成公共变量，批量绑定监听即可

内容的提问来源于stack exchange，提问作者Manish Ghoshal