IE11切换标签时viewer.js的resize事件触发异常崩溃问题求助

I’ve dealt with this exact IE11 quirk before—its habit of firing resize events when switching tabs is such a headache, especially when paired with PDF.js. Let’s break down how to fix that "cannot get 'initialized' of undefined/null" error in your viewer.js code.

Why This Happens #

The error occurs because IE11 triggers the resize event when you switch away from the PDF tab. At that point, PDFViewerApplication might be uninitialized or its context has been lost (since the tab is inactive). Chrome doesn’t fire resize events on tab switch, so it avoids this issue entirely.

Solution 1: Defensive Property Access (Quickest Fix) #

The simplest fix is to add a check for PDFViewerApplication itself before accessing its initialized property. This prevents the null/undefined reference error directly in your resize handler.

Modify your existing resize listener code like this:

window.addEventListener('resize', function webViewerResize(evt) {
  // First verify the app object exists before accessing its properties
  if (PDFViewerApplication && PDFViewerApplication.initialized) { 
    var currentScaleValue = PDFViewerApplication.pdfViewer.currentScaleValue;
    if (currentScaleValue === 'auto' || currentScaleValue === 'page-fit' || currentScaleValue === 'page-width') {
      PDFViewerApplication.pdfViewer.currentScaleValue = currentScaleValue;
    } else if (!currentScaleValue) {
      PDFViewerApplication.pdfViewer.currentScaleValue = DEFAULT_SCALE_VALUE;
    }
    PDFViewerApplication.pdfViewer.update();
  }
  // Add a check for the viewer container too, in case it's unavailable when switching tabs
  const viewerContainer = document.getElementById('viewerContainer');
  if (viewerContainer) {
    SecondaryToolbar.setMaxHeight(viewerContainer);
  }
});

This adds two key safety checks:

• PDFViewerApplication && PDFViewerApplication.initialized: Ensures the main app object exists before accessing its properties
• A check for viewerContainer to avoid errors when the tab is inactive

Solution 2: Toggle Resize Listener on Tab Visibility #

If you want to avoid running the resize handler entirely when the tab isn’t visible (more efficient), use the visibilitychange event to add/remove the resize listener dynamically. IE11 supports document.hidden and visibilitychange, so this works perfectly:

// Extract the resize logic into a reusable function
function webViewerResize(evt) {
  if (PDFViewerApplication.initialized) {
    var currentScaleValue = PDFViewerApplication.pdfViewer.currentScaleValue;
    if (currentScaleValue === 'auto' || currentScaleValue === 'page-fit' || currentScaleValue === 'page-width') {
      PDFViewerApplication.pdfViewer.currentScaleValue = currentScaleValue;
    } else if (!currentScaleValue) {
      PDFViewerApplication.pdfViewer.currentScaleValue = DEFAULT_SCALE_VALUE;
    }
    PDFViewerApplication.pdfViewer.update();
  }
  const viewerContainer = document.getElementById('viewerContainer');
  if (viewerContainer) {
    SecondaryToolbar.setMaxHeight(viewerContainer);
  }
}

// Add initial resize listener
window.addEventListener('resize', webViewerResize);

// Handle tab visibility changes
document.addEventListener('visibilitychange', function() {
  if (document.hidden) {
    // Tab is hidden, remove resize listener to prevent stray events
    window.removeEventListener('resize', webViewerResize);
  } else {
    // Tab is visible, re-add the listener
    window.addEventListener('resize', webViewerResize);
    // Optional: Trigger a resize manually to ensure the viewer is properly sized
    webViewerResize();
  }
});

This way, when the user switches away from the PDF tab, the resize listener is removed entirely—so IE11’s stray resize event won’t run the problematic code. When they switch back, the listener is restored, and we can even force a resize to keep the viewer looking correct.

Solution 3: Check Tab Visibility in the Resize Handler #

A middle-ground approach is to check if the tab is visible directly in the resize handler, and exit early if it’s not:

window.addEventListener('resize', function webViewerResize(evt) {
  // Exit immediately if the tab isn't visible
  if (document.hidden) return;

  if (PDFViewerApplication && PDFViewerApplication.initialized) {
    var currentScaleValue = PDFViewerApplication.pdfViewer.currentScaleValue;
    if (currentScaleValue === 'auto' || currentScaleValue === 'page-fit' || currentScaleValue === 'page-width') {
      PDFViewerApplication.pdfViewer.currentScaleValue = currentScaleValue;
    } else if (!currentScaleValue) {
      PDFViewerApplication.pdfViewer.currentScaleValue = DEFAULT_SCALE_VALUE;
    }
    PDFViewerApplication.pdfViewer.update();
  }
  const viewerContainer = document.getElementById('viewerContainer');
  if (viewerContainer) {
    SecondaryToolbar.setMaxHeight(viewerContainer);
  }
});

This is simpler than Solution 2 but still prevents the code from running when the tab is inactive, avoiding the error.

Which Solution Should You Choose? #

• Solution 1: Best for a quick, minimal fix that adds safety checks without changing the overall flow.
• Solution 2: Ideal if you want to optimize performance by avoiding unnecessary resize handling when the tab isn’t visible.
• Solution 3: A balanced option that’s simple to implement and still prevents the error.

Original Error Context for Reference #

Unhandled exception at line 7548, column 3 in http:/.../pdfjs/web/viewer.js
0x800a138f - Laufzeitfehler in JavaScript: Die Eigenschaft "initialized" eines undefinierten oder Nullverweises kann nicht abgerufen werden.

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