点击iframe内部链接时browser default loader不显示如何解决

针对iframe内部点击下载链接不触发父页面浏览器默认加载指示器的问题，解答如下：

根本原因 #

浏览器默认的加载指示器（地址栏进度条、标签页加载动画）是和顶层浏览上下文（即当前打开的父页面）的加载状态绑定的。iframe属于独立的子级浏览上下文，它内部发起的导航、下载请求默认只会更新自身上下文的加载状态，不会同步到顶层上下文，因此看不到父页面的浏览器默认loader，这是浏览器的标准设计，不属于异常问题。

可行解决方案 #

分两种场景处理：

场景1：iframe内容和父页面同域，或你有权限修改iframe站点的代码

可以通过postMessage实现跨上下文通信，在iframe内部监听到下载链接点击时，给父页面发送通知，父页面收到通知后有两种处理方案：

• 方案一：展示自定义进度提示组件，样式、触发/关闭时机完全可控，是目前体验最好的实现方式
• 方案二：通过临时创建隐藏iframe在父页面发起下载请求，触发顶层上下文的加载状态，呼出浏览器默认loader

参考代码如下：

<!-- 父页面代码 -->
<iframe src="你的同域业务页面地址" title="业务iframe" width="1024px" height="768px"></iframe>
<script>
window.addEventListener('message', e => {
  // 校验来源避免安全风险，替换为实际的iframe站点域名
  if (e.origin !== 'https://你的iframe业务域名') return
  if (e.data.type === 'downloadStart') {
    // 调用自定义加载提示
    // showCustomLoading()
    
    // 触发浏览器原生loader的实现
    const tempIframe = document.createElement('iframe')
    tempIframe.style.display = 'none'
    tempIframe.src = e.data.downloadUrl
    document.body.appendChild(tempIframe)
    // 下载完成后销毁临时iframe，可根据业务实际下载时长调整超时时间
    setTimeout(() => tempIframe.remove(), 60000)
  }
})
</script>

// iframe内部代码
// 匹配所有下载链接，可根据实际业务调整选择器规则
document.querySelectorAll('a[download], a[href*="download"]').forEach(link => {
  link.addEventListener('click', () => {
    window.parent.postMessage({
      type: 'downloadStart',
      downloadUrl: link.href
    // 替换为实际的父页面域名
    }, 'https://你的父页面域名')
  })
})

场景2：iframe是第三方跨域站点，且你无法修改其内部代码

这种场景受浏览器跨域安全策略限制，无法监听iframe内部的用户操作，也没有办法触发浏览器默认loader。可以根据业务实际情况调整实现逻辑，比如将下载入口挪到父页面统一提供，或者通过服务端代理所有iframe内的下载请求，由父页面统一发起下载。

补充说明 #

目前没有标准API可以直接让子iframe的请求自动触发父页面的原生加载指示器，所有实现都是基于现有浏览器能力的兼容方案，优先推荐使用自定义进度条的方案，适配性更强，体验更统一。

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