Load many WebViewer, the browsers automatically refresh on IPhone and Ipad devices

Technical Support
1

Which product are you using?

PDF.js Express Viewer
PDF.js Express Version

UI version ‘8.7.0’
Core version ‘8.7.4’
webviewer.min.js ‘8.7.4’

Detailed description of issue
I want to load 7 PDF WebViewers in my blazor WebAssembly.
On iPhone and iPad devices, the Chrome and Safari browsers automatically refresh when loaded into the 5th WebViewer.

Expected behaviour
{Provide a screenshot or description of the expected behaviour}

Does your issue happen with every document, or just one?
{Answer here}

Link to document
{Provide a link to the document in question if possible}

Code snippet
webviewerScripts.js

window.webviewerFunctions = {
    initWebViewer: function (elementID, pdfurl) {
        console.log(elementID);
        console.log(pdfurl);
        const viewerElement = document.getElementById(elementID);
        WebViewer({
            path: 'lib',
            initialDoc: pdfurl,
            showToolbarControl: '0',
            preloadWorker: `${WebViewer.WorkerTypes.PDF}`,
            disabledElements: [
                'ribbons',
                'header',
                'pageNavOverlay',
                'documentContainer',
                'searchPanel',
                'toolsHeader',
                'leftPanel',
                'viewControlsOverlay',
                'menuOverlay',
                'zoomOverlay',
                'pageManipulationOverlay',
                'thumbnailsControlRotatePopup',
                'thumbnailsControlInsertPopup',
                'thumbnailsControlManipulatePopup',
                'contextMenuPopup',
                'signatureModal', 'printModal', 'passwordModal', 'linkModal', 'filterModal', 'Model3DModal', 'ColorPickerModal', 'pageRedactionModal', 'languageModal',
                'formFieldEditPopup'],
            licenseKey: 'XXXXXXX',// demo	
        }, viewerElement).then((instance) => {
            // now you can access APIs through the WebViewer instance
            const { Core, UI } = instance;

            // adding an event listener for when a document is loaded
            Core.documentViewer.addEventListener('documentLoaded', () => {
                console.log('Core document loaded');
                UI.setFitMode(UI.FitMode.FitPage);
                UI.setLayoutMode(UI.LayoutMode.Single);
            });


            // adding an event listener for when the page number has changed
            //Core.documentViewer.addEventListener('pageNumberUpdated', (pageNumber) => {
            //    console.log(`Page number is: ${pageNumber}`);
            //});

            UI.disableFeatures(['TextSelection']);


            // adds a button to the header that on click sets the page to the next page
        })
    }
};

XXXX.razor file

    private async void InitPdfViewers()
    {
        if (PdfReaderViewList is not null)
        {
            for (int i = 0; i < PdfReaderViewList.Count; i++)
            {
                if (PdfReaderViewList[i].PdfURL != string.Empty)
                {
                    await JSRuntime.InvokeAsync<object>("webviewerFunctions.initWebViewer", PdfReaderViewList[i].PdfViewID, PdfReaderViewList[i].PdfURL);
                }
            }
        }

        System.Console.WriteLine("InitPdfViewers");
    }
3

Hello Cameron,

You can load multiple instances of PDF.js at the same time. However, please note that each instance will consume a certain amount of memory and CPU resources. The exact number of instances you can load will depend on the resources available on the device and the complexity of the documents.

The reason the browsers are refreshing could be they are running out of memory.

If you want to open multiple files, you can use the MultiTab feature introduced in v8.4.

Best Regards,
Darian Chen