（拍大腿）做移动端开发的兄弟们都懂！辛辛苦苦写的页面跳转逻辑，到真机上不是历史记录乱套就是弹窗被拦截。上周有个做H5活动的朋友差点被开除——他们的抽奖弹窗在iPhone上根本弹不出来！今天咱们就用三个真实车祸现场，手把手教你避开这些天坑。

场景一：营销活动的连环跳转

你们有没有碰到过这种需求？用户从分享链接进入→自动跳APP下载页→没安装APP再跳应用商店。看起来简单吧？但用??window.location.href??直接跳，安卓机历史记录会乱成毛线团！

来看这个翻车案例：

javascript复制
// 错误示范（历史栈爆炸）
function checkAppInstalled(){
  setTimeout(() => {
    window.location.href = 'appstore://download' 
  }, 1000)
}

// 正确姿势（清空历史记录）
if(!isAppInstalled){
  window.location.replace('https://appstore.com')
}

这里有个冷知识：??replace()??方法不会产生历史记录，相当于替换当前页。去年给某电商做618活动时，用这招把跳出率降低了18%！

但iOS有个奇葩设定——Safari中replace跳转有时会卡顿。这时候得祭出终极大招：

javascript复制
// 创建隐藏iframe触发跳转
const iframe = document.createElement('iframe')
iframe.style.display = 'none'
iframe.src = 'appstore://download'
document.body.appendChild(iframe)

// 3秒后移除防止内存泄漏
setTimeout(() => {
  iframe.remove()
}, 3000)

场景二：移动端红包弹窗攻防战

说到弹窗拦截，做运营的同学都要吐血。去年双十一某平台的弹窗在微信浏览器里全军覆没，直接损失百万GMV！看这段救命代码：

javascript复制
// 必须是用户直接触发的！
button.addEventListener('touchend', () => {
  const newWindow = window.open('', '_blank')
  
  // 安卓微信专属方案
  if(/MicroMessenger/.test(navigator.userAgent)) {
    const iframe = document.createElement('iframe')
    iframe.src = 'popup.html'
    iframe.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%'
    document.body.appendChild(iframe)
    return
  }
  
  if(!newWindow || newWindow.closed){
    // 降级方案：模拟弹窗
    showModal()
  }
})

这里有个血泪经验：iOS的??touchstart??事件会阻断弹窗，必须用??touchend??！某社交APP用这个细节优化，把弹窗打开率从23%提升到67%。

场景三：跨页面登录状态同步

最恶心的还是登录跳转！用户从A页跳到登录页，登录完怎么同步状态？试试这个??window.postMessage??黑科技：

登录成功页：

javascript复制
// 检查是否有来源页
if(window.opener){
  window.opener.postMessage({
    type: 'loginSuccess',
    token: 'xxx'
  }, 'https://yourdomain.com')
  
  // 自动关闭当前页
  window.close()
}

来源页监听：

javascript复制
window.addEventListener('message', (event) => {
  if(event.origin !== 'https://yourdomain.com') return
  
  if(event.data.type === 'loginSuccess'){
    localStorage.setItem('token', event.data.token)
    // 刷新用户状态
    loadUserInfo()
  }
})

但是！安卓WebView可能会吃掉close事件，这时候需要加个备选方案：

javascript复制
// 防止窗口关不掉
setTimeout(() => {
  window.history.back()
}, 500)

小编观点：移动端适配就像打地鼠，永远有想不到的坑。最近发现用??window.matchMedia('(orientation: portrait)')??检测横竖屏比resize事件更靠谱，特别是折叠屏手机开始普及后。下次可以聊聊怎么用这个API做折叠屏适配，保准让你大开眼界！