在 Firefox 中使用 window.open() 打開自定義 URL

Question

在 Firefox 88 中，似乎用window.open(customURL, '_parent')打開自定義深層鏈接 URL 會重新加載當前選項卡這個問題有什么解決辦法嗎？ 我應該使用<iframe>代替 window.open() 嗎？ 但是，Chrome 中的行為有所不同。

所需行為： window.open()打開深度鏈接應用程序，而 web 應用程序（用 Angular 編寫）繼續在同一幀中工作。

Answer 1

推薦一個 Iframe

一些瀏覽器對window.open感到特別厭倦，因為它被嚴重濫用並因此被阻止。 但是， iframe是很正常的，如果使用應用程序方案並受支持，則會產生打開應用程序的副作用。

這是您可以嘗試的一種方法。

function checkIsAppSupported(appSchemeUrl, msThreshold) {
  return new Promise((resolve) => {
    let docBlurOccurred = false

    const iframe = document.createElement('iframe', {
      src: appSchemeUrl,
      style: 'display:none'
    })
    document.appendChild(iframe)

    function onDocBlur() {
      docBlurOccurred = true
    }

    document.addEventListener('blur', onDocBlur)
    // or try the newer
    // document.addEventListener('visibilitychange', onDocBlur)

    setTimeout(() => {
      // cleanup
      iframe.remove()
      document.removeEventListener('blur', onDocBlur)
    
      resolve(docBlurOccurred)
    }, msThreshold); // checks if document focus changed within ms
  });
}

async function tryAppSupported() {
  const isAppSupported = await checkIsAppSupported('my-app://', 500);
  if (isAppSupported) {
    // do something
  }
}

tryAppSupported()

這意味着如果主 window 在 iframe 加載時失去焦點，您可以合理地假設實際應用程序方案已加載並將焦點從當前 window 移開。

有一些 npms 做這種事情，例如https://www.npmjs.com/package/open-native-app並且非常支持關心什么類型的操作系統檢查這種行為。

快樂編碼。