Search code examples
javascriptgoogle-chromedom-events

Window events with pdf document via Chrome

I would have made a minimal sample, but I couldn't get the Chrome PDF viewer to work in jsfiddle, so I wasn't sure how I would show it.

But essentially, I have a resizable div that has handles around it, and it works fine. However, when I added an Adobe PDF object that fills the screen, the resizers no longer work properly. The resizers I have relies on

  • Each resizer's mousedown triggers adding window mousemove and mouseup event listeners
  • That window mousemove event does all the resizing as needed
  • Upon window mouseup, the window event listeners are removed

It appears that if I set display:none for the pdf object, the resizers work properly. Upon further testing, the resizers also appears to work as long as the cursor doesn't get beyond the div resizers too fast, which seems to indicate that the window mousemove mouseup events are suppressed somehow when the cursor moves beyond the resizer/div and is within the PDF object interface? So, I am trying to figure out how I can force the window events to trigger even when within Chrome's PDF viewer - how do I do that?

Edits:

1. Also tried making the window smaller than screen. The resizers allowed a size change outside Chrome's window when the cursor drag moves beyond the Chrome window, and it only doesn't work when the cursor is moving around the PDF object displayed by Chrome. That points towards the underlying code appearing to work properly, and that the issue is with how window events are handled when the cursor is on the Chrome pdf object.

2. I tried too with creating a dummy wrapper that spans the entire screen. Despite it being the bottom most layer with event bubbling (dummy div holds both the embedded object and the resizable div), event handling still doesn't get to it, making me think that Chrome somehow has some stop event propagation code within its viewer associated with embed. Wondering if there's a way to suppress the do not propagate there...

Solution

  • I am not aware of any methods to bypass Chrome's own viewer's event propagation controls, but PDF.js comes to rescue!

    https://mozilla.github.io/pdf.js/

    PDF.js comes with a viewer that will be able to take URL files as long as it's not X-domain. As long as you have administrative powers for the domain where you host the PDF files, you can put PDF.js under that same domain, and embed the viewer via iframe with the appropriate URL and query string via ?file=%FILENAME% and display the PDF file as needed. Events will then propagate through to something like a dummy div where window events will still work properly.