Cannot handle scroll of iframe with pdf embeded with blob-link

Question

I'm having Angular (v17 if that matters) component with iframe with pdf inside. pdf is embeded using blob: url. Something like the following

    <!-- pdf.safeUrl is something like blob:http://localhost:4200/62d410cc-8275-463f-b829-8365196a8471#toolbar=0&navpanes=0&scrollbar=0 -->
    <iframe
        #pdfIframe
        [src]="pdf.safeUrl"
        frameBorder="0"
        height="600px"
        width="100%"
    ></iframe>

I'm trying to catch scroll event of pdf inside iframe. In component class I have the following

@ViewChildren('pdfIframe') pdfIframe: QueryList<ElementRef<HTMLIFrameElement>>;

ngAfterViewInit(): void {
    this.pdfIframe.changes.subscribe((iframe: QueryList<ElementRef<HTMLIFrameElement>>) => {
        if (iframe.length === 0) {
            return;
        }

        iframe.first.nativeElement.addEventListener('load', (e: Event) => {
            console.log('load ok'); // <-- this logs is printed in console
            
            const iframe: HTMLIFrameElement = e.target as HTMLIFrameElement;
            const doc =  iframe.contentDocument || iframe.contentWindow;
            
            doc.addEventListener('scroll', e => {
                console.log('scrollin'); // <-- this log never get printed in console
            });
        })

        console.log(iframe.first.nativeElement.contentDocument);
    });
}

The second log never get printed. Can someone prompt me what the problem is?

Answer 1

The problem is that a PDF is not a webpage, so you cannot inspected it with JS. The workaround is to use a JS pdf render in the iframe.

Have a look at https://mozilla.github.io/pdf.js/