PWA打开外部链接时如何隐藏带三点图标的导航栏？

最优解决方案 #

你当前使用window.location.href直接跳转外部链接的方式，会让浏览器识别为离开当前PWA上下文，只要跳转的域名没有和你的PWA做可信关联，安卓端Chrome就会自动弹出带菜单按钮的顶部导航栏。根据你是否能控制跳转目标外部域名的配置，可以选择对应最优方案：

• 可控制目标外部域名配置

  1. 先确认你的PWA的manifest.json已经正确配置"display": "standalone"。
  2. 在目标外部域名的根目录下放置.well-known/assetlinks.json文件，完成和你的PWA的Digital Asset Links关联验证。验证通过后，直接用原有跳转逻辑打开外部链接，就会保持standalone模式，不会显示顶部导航栏，仅支持滑动手势返回。

• 不可控制目标外部域名配置
  改用全屏iframe加载外部链接的方案，完全在PWA内部渲染外部页面，自然不会触发系统浏览器导航栏，替换后的代码示例如下：

  <div
    class="space-button"
    on:click={() => {
      if (depObj.viewUrl) {
        // 创建全屏iframe容器
        const iframeContainer = document.createElement('div')
        iframeContainer.style.cssText = `
          position: fixed;
          top: 0;
          left: 0;
          width: 100vw;
          height: 100vh;
          z-index: 99999;
          background: #fff;
        `
        const iframe = document.createElement('iframe')
        iframe.src = depObj.viewUrl
        iframe.style.cssText = `
          width: 100%;
          height: 100%;
          border: none;
        `
        // 兼容物理返回键/滑动手势关闭容器
        const closeIframe = () => {
          iframeContainer.remove()
          window.removeEventListener('popstate', closeIframe)
        }
        window.addEventListener('popstate', closeIframe)
        history.pushState(null, '')
  
        iframeContainer.appendChild(iframe)
        document.body.appendChild(iframeContainer)
      }
    }}
  >
    BUTTON TO OPEN EXTERNAL LINK
  </div>
  

  如果目标外部网站设置了X-Frame-Options禁止iframe嵌入，只能选择第一种关联域名的方案实现需求。

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