reactjs - How to open an external link in a new tab and close it when it redirects to a native app? - Stack Overflow

admin管理员组

文章数量:1356751

I'm working on a JavaScript function that opens an external link in a new tab. However, I need the tab to automatically close if the user is redirected to a native mobile app via deep linking. Here's my current code:

export const openExternalLink = (url: string) => {
  const newTab = window.open(url, '_blank');

  // Check if the new tab was opened but it is empty due to deep linking redirecting to native related app then close it
  if (newTab) {
    // Close the tab if it is empty (native app redirect)
  }
};

I'm working on a JavaScript function that opens an external link in a new tab. However, I need the tab to automatically close if the user is redirected to a native mobile app via deep linking. Here's my current code:

export const openExternalLink = (url: string) => {
  const newTab = window.open(url, '_blank');

  // Check if the new tab was opened but it is empty due to deep linking redirecting to native related app then close it
  if (newTab) {
    // Close the tab if it is empty (native app redirect)
  }
};

The problem is that when a user clicks the link, it opens the link in a new tab. However, if the device supports deep linking and the user is redirected to a native app, the tab remains open, even though it's empty or doesn't load anything.

What I've tried:

Checking if the newTab is loaded by inspecting its content, but I can't determine if the tab is redirected.

Trying to use newTab.close() but I’m not sure if there’s a reliable way to detect when the tab redirects to the app.

What I need: A reliable solution that detects when the external link redirects to a native app, and then closes the tab automatically.

Any ideas on how to solve this?

• reactjs

Share Improve this question Follow asked Mar 30 at 20:00 RichardsonRichardson 2,31411 gold badge2424 silver badges6262 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Solution turned out to be to open an external link in a new tab and monitor its content to close the tab if it redirects to an empty page or remains empty. This can be done using JavaScript and setting an interval to check the content of the new tab. Below is a working solution that opens a URL in a new tab and closes the tab if it remains empty (or redirects to an empty page like about:blank).

export const openExternalLink = (url: string) => {
  // Open the link in a new tab
  const newTab = window.open(url, '_blank');
  
  if (newTab) {
    // Set a timer to check if the tab's content is empty
    const checkEmptyContent = setInterval(() => {
      try {
        // If the content is still 'about:blank' or the body is empty, close the tab
        if (newTab.document.body.innerHTML.trim() === '' || newTab.location.href === 'about:blank') {
          console.log('Tab content is empty or redirected to about:blank. Closing the tab.');
          newTab.close();  // Close the tab
          clearInterval(checkEmptyContent); // Stop checking after closing
        }
      } catch (e) {
        // If the new tab is from a different domain, a cross-origin error might occur
        // We handle the error to avoid breaking the script
        console.error('Cross-origin error:', e);
      }
    }, 1000); // Check every second (adjust as needed)
  }
};

本文标签：