如何捕获iframe触发的第三方登录弹窗关闭事件及窗口引用

Alright, let’s tackle this common third-party integration challenge step by step. Dealing with cross-domain popups from iframes can be tricky due to browser security rules, but there are reliable workarounds depending on how the third-party tool behaves.

1. Capture the Login Popup Reference #

If the third-party tool uses standard window.open() to launch the login popup from within the iframe, you can intercept this call in your main page to grab a reference to the popup. Here’s how:

// Store the original window.open method to avoid breaking other functionality
const originalOpen = window.open;
let loginPopupRef = null;

// Override window.open to track login popups
window.open = function(url, popupName, features) {
  const newPopup = originalOpen.call(window, url, popupName, features);
  
  // Adjust this condition to match your third-party's login popup URL/name
  if (url.includes('login') || popupName === 'authPopup') {
    loginPopupRef = newPopup;
    console.log('Captured login popup reference');
  }
  
  return newPopup;
};

This works because any window.open() call from the iframe will bubble up to the main window’s overridden method (assuming the third-party doesn’t use a sandboxed iframe with allow-popups blocked).

2. Detect Popup Close Events #

Cross-domain restrictions prevent us from attaching direct onclose listeners, so a reliable fallback is to poll the popup’s closed property:

function monitorPopupClose(popup) {
  if (!popup) return;
  
  const closeChecker = setInterval(() => {
    if (popup.closed) {
      clearInterval(closeChecker);
      console.log('Login popup has closed');
      // Add your post-close logic here (e.g., refresh user session, update UI)
    }
  }, 500); // Check every 500ms (adjust timing as needed)
}

// Call this after capturing the popup reference
if (loginPopupRef) {
  monitorPopupClose(loginPopupRef);
}

3. Close the Popup Before Redirect #

If you need to close the login popup before it redirects (e.g., after successful authentication), you have two options depending on third-party support:

Option A: Use postMessage (Best if Third-Party Supports It) #

If you can coordinate with the third-party vendor to send a message from the popup to your main page upon login success, this is the cleanest approach:

Main Page Code:

window.addEventListener('message', (event) => {
  // Verify the message comes from the trusted third-party domain
  if (event.origin !== 'https://manufacture.com') return;
  
  if (event.data.action === 'loginSuccess') {
    // Close the popup if we have a reference
    if (loginPopupRef) {
      loginPopupRef.close();
    }
    // Trigger your post-authentication logic here
  }
});

Third-Party Popup Code (Ask Vendor to Add):

// After successful login, send message to main page and close
window.opener.postMessage(
  { action: 'loginSuccess' },
  'https://your-main-domain.com' // Replace with your actual domain
);
window.close();

Option B: Poll for Redirect URL (Fallback for No Vendor Support) #

If the third-party can’t add postMessage, you can poll the popup’s location (with error handling for cross-domain restrictions) and close it when you detect a successful redirect:

function monitorPopupRedirect(popup) {
  if (!popup) return;
  
  const redirectChecker = setInterval(() => {
    try {
      const popupUrl = popup.location.href;
      // Adjust this condition to match your login success redirect URL
      if (popupUrl.includes('login-success') || popupUrl.includes('auth-complete')) {
        popup.close();
        clearInterval(redirectChecker);
        console.log('Popup closed before redirect');
        // Run post-authentication logic
      }
    } catch (error) {
      // Cross-domain access error is expected here—ignore it
    }
  }, 500);
}

// Call this after capturing the popup reference
if (loginPopupRef) {
  monitorPopupRedirect(loginPopupRef);
}

Important Notes #

• Sandboxed Iframes: If the third-party iframe uses the sandbox attribute, ensure it includes allow-popups and allow-same-origin (if needed) to enable popup functionality.
• Browser Popup Blockers: Make sure your users allow popups from your domain—browsers will block popups triggered without user interaction (e.g., on page load).

内容的提问来源于stack exchange，提问作者B.Irneos