Cordova InAppBrowser容器内弹窗支持问题求助

Hey there! Let's tackle this frustrating popup issue with your PDF documents in InAppBrowser. I’ve dealt with similar scenarios when building Cordova apps, so here are some practical workarounds and solutions you can implement without (or with minimal) server changes:

1. Intercept Popup Requests & Handle Them Directly #

The most straightforward fix is to listen for navigation events in InAppBrowser, detect when a PDF popup is triggered, and redirect it to open in the same browser window or a native viewer.

Implementation Code: #

// Open your login page in InAppBrowser
const loginBrowser = cordova.InAppBrowser.open('your-login-url', '_blank', 'location=yes');

// Listen for navigation start events
loginBrowser.addEventListener('loadstart', (event) => {
  // Detect if the target URL is a PDF (adjust the regex if your URLs are more complex)
  if (/\.pdf$/i.test(event.url)) {
    // Stop the default popup from loading
    loginBrowser.executeScript({ code: 'window.stop();' });

    // Option 1: Open the PDF in the same InAppBrowser window
    loginBrowser.executeScript({ code: `window.location.href = '${event.url}';` });

    // Option 2: Open in the system's default PDF viewer (better native experience)
    // cordova.InAppBrowser.open(event.url, '_system');
    // loginBrowser.close();
  }
});

Why this works: #

InAppBrowser doesn’t natively support secondary popups, but by intercepting the navigation request, you can bypass the popup behavior entirely and handle the PDF directly. No server changes needed!

2. Override window.open in the Loaded Page #

If your login page uses window.open() to trigger the PDF popup, you can inject custom JavaScript into the InAppBrowser to override this method and send the PDF URL back to your Cordova app for native handling.

First, install the cordova-plugin-file-opener2 plugin for native PDF viewing:

cordova plugin add cordova-plugin-file-opener2

Implementation Code: #

const loginBrowser = cordova.InAppBrowser.open('your-login-url', '_blank', 'location=yes');

// Inject script after the page loads
loginBrowser.addEventListener('loadstop', () => {
  loginBrowser.executeScript({
    code: `
      // Override the native window.open method
      window.open = function(pdfUrl) {
        // Send a message to the Cordova app
        window.postMessage({ action: 'open-pdf', url: pdfUrl }, '*');
        return false; // Block the native popup
      };
    `
  });
});

// Listen for messages from the InAppBrowser page
loginBrowser.addEventListener('message', (event) => {
  if (event.data.action === 'open-pdf') {
    // Use the file opener plugin to open the PDF natively
    cordova.plugins.fileOpener2.open(
      event.data.url,
      'application/pdf',
      {
        error: (err) => console.error('Failed to open PDF:', err),
        success: () => console.log('PDF opened successfully')
      }
    );
  }
});

Why this works: #

This gives you full control over how the PDF is opened—you can use the system’s default PDF reader, which often provides a better user experience than viewing it in a browser window.

3. Minimal Server-Side Adjustment (If Possible) #

If you have access to modify the server-side code that triggers the PDF popup, change the window.open() call to a regular navigation or a download link. For example:

• Replace window.open('/documents/my-file.pdf') with location.href = '/documents/my-file.pdf'
• Or use a link with target="_self" instead of target="_blank"

This eliminates the popup entirely, letting InAppBrowser handle the PDF natively without any extra client-side code.

4. Try Enhanced InAppBrowser Plugins #

Some community-maintained InAppBrowser plugins have added support for popups. For example, plugins like cordova-plugin-inappbrowser-popupfix (verify compatibility with your Cordova version) may resolve the popup handling issue out of the box. Just replace the official plugin with the enhanced version and test:

cordova plugin remove cordova-plugin-inappbrowser
cordova plugin add cordova-plugin-inappbrowser-popupfix

Content of the question originates from Stack Exchange, question author: Sean Hughes