关于<iframe>广告横幅基于User-Agent的内容与可见性配置问询

直接说结论 #

两种配置方式都能实现，但优先在iframe自身源码里做——不用麻烦嵌入你的广告的网站开发，逻辑也能统一控制，不会因为不同嵌入方的实现差异出问题。

怎么在iframe自身实现 #

• 先判断是不是移动设备：用JS读取navigator.userAgent，找Mobile、Android、iPhone这些关键字，或者直接看window.innerWidth（比如小于768px就算移动端）。
• 区分iOS Safari和Android：解析userAgent，如果有iPhone/iPad/iPod同时包含Safari（还要排除Chrome iOS，因为它的UA里也有Safari），就是iOS Safari；有Android就是安卓设备。
• 控制内容显示：根据检测结果，要么渲染对应广告，要么直接把iframe藏起来（非移动设备就不显示）。

给你个简单的代码示例，直接放到iframe的页面里：

// 页面加载完就执行检测
window.addEventListener('load', function() {
  const ua = navigator.userAgent.toLowerCase();
  // 判断是不是移动设备
  const isMobile = /mobile|android|iphone|ipad|ipod/.test(ua);
  if (!isMobile) {
    // 非移动设备，隐藏整个横幅
    document.body.style.display = 'none';
    return;
  }

  // 区分设备类型
  const isIOS = /iphone|ipad|ipod/.test(ua);
  const isSafari = /safari/.test(ua) && !/chrome|crios/.test(ua); // 排除Chrome iOS

  const adContainer = document.getElementById('ad-content');
  if (isIOS && isSafari) {
    adContainer.innerHTML = '<div style="width:100%;height:50px;background:#ccc;">iOS Safari专属广告</div>';
  } else if (/android/.test(ua)) {
    adContainer.innerHTML = '<div style="width:100%;height:50px;background:#eee;">Android专属广告</div>';
  } else {
    adContainer.innerHTML = '<div style="width:100%;height:50px;background:#ddd;">通用移动广告</div>';
  }
});

嵌入端配置的情况（不推荐） #

如果嵌入方愿意帮你做，也可以在他们的页面里先检测设备，只在移动设备上插入iframe，或者给iframe的URL加个参数（比如?device=ios-safari），让你的iframe根据参数展示内容。但这种方式太依赖别人，不同网站可能实现不一样，后期维护起来麻烦，除非特殊情况否则别用。

比如嵌入方的代码大概是这样：

<script>
const ua = navigator.userAgent.toLowerCase();
const isMobile = /mobile|android|iphone|ipad|ipod/.test(ua);
if (isMobile) {
  const iframe = document.createElement('iframe');
  let deviceParam = '';
  if (/iphone|ipad|ipod/.test(ua) && /safari/.test(ua) && !/chrome|crios/.test(ua)) {
    deviceParam = '?device=ios-safari';
  } else if (/android/.test(ua)) {
    deviceParam = '?device=android';
  }
  iframe.src = '你的广告地址' + deviceParam;
  iframe.width = '100%';
  iframe.height = '50';
  iframe.frameBorder = '0';
  document.querySelector('#ad-place').appendChild(iframe);
}
</script>

要注意的点 #

• userAgent可能被用户篡改，但广告场景下足够用了，大部分用户不会改这个。
• 你的iframe页面要做响应式，比如宽度设为100%，适配不同移动设备的屏幕。
• 如果你的广告域名和嵌入方的域名不一样（跨域），别想着让父页面给你传数据，同源策略会限制这种交互，所以所有逻辑尽量自己在iframe里搞定。

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