如何在Cordova InAppBrowser中检测子浏览器主动关闭事件而非所有关闭操作

Great question! The challenge here is telling apart an exit triggered by your auth success script (window.close()) versus a manual user close. Here are two reliable ways to solve this:

Approach 1: Check Page Content to Flag Auth Success #

Since your auth success page returns specific HTML content, you can inject a script into the InAppBrowser to detect this content and set a flag before the exit event fires.

Step-by-Step Implementation: #

1. Initialize the InAppBrowser and declare a flag to track auth status.
2. Listen for the loadstop event (fires when the page finishes loading) to check the page content.
3. Use executeScript to run a snippet that verifies if the page shows "Auth success!".
4. In the exit event, check the flag to confirm if the close was due to successful auth.

let isAuthSuccess = false;
const authBrowser = cordova.InAppBrowser.open('https://your-authentication-url.com', '_blank', 'location=yes');

// Listen for page load completion to check content
authBrowser.addEventListener('loadstop', (event) => {
  // Inject script to check if the page contains the auth success message
  authBrowser.executeScript({
    code: "document.querySelector('p')?.textContent === 'Auth success!'"
  }, (results) => {
    // Update the flag if the success message is found
    if (results[0]) {
      isAuthSuccess = true;
    }
  });
});

// Handle the exit event with the auth flag
authBrowser.addEventListener('exit', () => {
  if (isAuthSuccess) {
    console.log('✅ Exit triggered by successful authentication');
    // Add your post-auth success logic here (e.g., save tokens, navigate)
  } else {
    console.log('❌ Exit triggered manually or by other reasons');
    // Handle cases where auth was not completed
  }
});

Approach 2: Modify Redirect URL to Include Auth Status (More Reliable) #

If you have control over the authentication service, adjust the redirect URL to include a query parameter like ?auth=success instead of returning the HTML directly. This makes detecting success more robust than parsing page content.

Step-by-Step Implementation: #

1. Configure your auth service to redirect to a URL with auth=success upon successful authentication.
2. Listen for the loadstart event (fires when the browser starts loading a new URL) to check for the parameter.
3. Set the auth flag when the parameter is detected, then handle the exit event as before.

let isAuthSuccess = false;
const authBrowser = cordova.InAppBrowser.open('https://your-authentication-url.com', '_blank', 'location=yes');

// Check the redirect URL for the success parameter
authBrowser.addEventListener('loadstart', (event) => {
  if (event.url.includes('auth=success')) {
    isAuthSuccess = true;
    // Optional: You can manually close the browser here if needed
    // authBrowser.close();
  }
});

// Handle exit with the verified flag
authBrowser.addEventListener('exit', () => {
  if (isAuthSuccess) {
    console.log('✅ Authentication succeeded before exit');
    // Execute your post-auth workflow
  } else {
    console.log('❌ Authentication was not completed');
    // Handle incomplete auth flow
  }
});

Key Notes: #

• Approach 1 works if you can’t modify the auth service, but relies on page content which could break if the HTML structure is updated.
• Approach 2 is more maintainable and reliable, as URL parameters are less prone to accidental changes than page content.
• Be sure to test edge cases, like the user closing the browser mid-auth before the success page loads—your flag will remain false, which is the desired behavior.

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