Angular2执行操作后跳转外部URL遇弹窗拦截的问题求助

Hey there! Let's work through that popup blocker problem you're facing. The core issue here is that modern browsers block popups that aren't directly tied to a user-initiated action (like a button click). When you call window.open inside your HTTP subscription callback, that code runs asynchronously long after the user's original interaction—so the browser flags it as an untrusted popup and blocks it.

Here are two reliable solutions to fix this:

1. Pre-Open a Blank Window (Most Reliable) #

The key trick here is to open a blank window immediately when the user triggers the action (like clicking a button), then update its URL once your API call finishes. Since the initial window open is user-initiated, the browser won't block it.

// Bind this method to your button's click event in the template
handleUserClick() {
  // Open a blank window right away (user-triggered, no block)
  const redirectWindow = window.open('', '_blank');
  // Optional: Add a loading message so the user knows something's happening
  redirectWindow.document.write('<p>Loading your link...</p>');

  // Make your API call
  this.http.get(`${this.apiurl}api/insert.php?did=${this.did}`).subscribe({
    next: (data) => {
      const jsonData = data.json();
      const targetUrl = jsonData.urlpass;
      // Update the blank window's URL to your target
      redirectWindow.location.href = targetUrl;
    },
    error: (err) => {
      // Handle errors: close the blank window and notify the user
      redirectWindow.close();
      alert('Oops! Failed to load the link. Please try again.');
    }
  });
}

2. Dynamically Create & Trigger an Anchor Tag (Conditional Reliability) #

If pre-opening a window doesn't fit your UX, you can create an anchor tag dynamically—but you need to ensure the click is triggered within the context of the user's original action. Note that this might still get blocked if the API call takes too long (since the browser's user-action context times out).

handleUserClick() {
  this.http.get(`${this.apiurl}api/insert.php?did=${this.did}`).subscribe({
    next: (data) => {
      const jsonData = data.json();
      const targetUrl = jsonData.urlpass;

      // Create a hidden anchor tag
      const anchor = document.createElement('a');
      anchor.href = targetUrl;
      anchor.target = '_blank';
      anchor.style.display = 'none';
      
      // Add it to the DOM and trigger click
      document.body.appendChild(anchor);
      anchor.click();
      
      // Clean up the element
      document.body.removeChild(anchor);
    },
    error: (err) => {
      alert('Failed to retrieve the link. Please try again.');
    }
  });
}

Why Your Original Anchor Tag Approach Failed #

When you tried triggering $("#anchorID")[0].click() inside the subscription callback, that action was no longer tied to the user's original click—since the API call is asynchronous. Browsers only allow trusted actions that happen immediately after a user's interaction, so delayed clicks get blocked.

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