通过Chrome浏览器显示PDF文档的窗口事件

wkftcu5l  于 2023-02-27  发布在  Go
关注(0)|答案(2)|浏览(228)

我本来想做一个最小的示例,但是我不能让ChromePDF查看器在jsfidle中工作,所以我不确定如何显示它。
但本质上,我有一个可调整大小的div,它周围有句柄,它工作得很好。然而,当我添加一个填充屏幕的Adobe PDF对象时,大小调整器不再正常工作。

  • 每个大小调整器的mousedown触发添加窗口mousemove和mouseup事件侦听器
  • 该窗口mousemove事件根据需要执行所有大小调整操作
  • 在鼠标释放窗口时,窗口事件侦听器将被删除

如果我为pdf对象设置了display:none,那么调整大小器就可以正常工作。经过进一步测试,只要光标没有过快地超出div调整大小器,调整大小器就可以正常工作。这似乎表明,当光标移动到调整大小器/div之外并位于PDF对象界面内时,窗口mousemove mouseup事件会被抑制。我正在尝试弄清楚如何强制窗口事件触发,即使是在Chrome的PDF查看器中-我该怎么做?

编辑内容:

  • 1.还尝试过让窗口比屏幕小。当光标拖动到Chrome窗口之外时,大小调整器允许Chrome窗口之外的大小发生变化,只有当光标在Chrome显示的PDF对象周围移动时,大小调整器才不起作用。这表明底层代码看起来工作正常。问题在于当光标位于Chrome pdf对象上时如何处理窗口事件。*
  • 2.我也尝试过创建一个覆盖整个屏幕的虚拟 Package 器,尽管它是最底层的事件冒泡层(dummy div同时包含嵌入对象和可调整大小的div),事件处理仍然无法处理它,这让我觉得Chrome浏览器的查看器中有一些与embed相关的停止事件传播代码。这是一种抑制不传播的方法... *
koaltpgm

koaltpgm1#

我不知道有什么方法可以绕过Chrome自己的查看器的事件传播控制,但PDF.js来拯救!
https://mozilla.github.io/pdf.js/
PDF.js附带了一个查看器,只要URL文件不是X域,它就可以接收URL文件。只要你对存放PDF文件的域有管理权限,你就可以把PDF.js放在同一个域中。并通过iframe将适当的URL和查询字符串通过?file=%FILENAME%嵌入查看器,然后根据需要显示PDF文件。然后,事件将传播到类似于虚拟div的位置,window事件仍将正常工作。

ih99xse1

ih99xse12#

我也遇到过类似的问题,但是“keyup”,“keydown”事件。我发现默认情况下PDF文件页面有document.hasFocus() === false,这意味着没有可以接受键盘事件的目标节点。通过不同的尝试和错误,我发现document.activeElement表示在其边界内呈现PDF的标记。如果我们执行document.activeElement.focus()然后键盘事件开始工作。但是,如果我点击PDF文件,那么事件停止工作。
您可以通过将此代码段粘贴到PDF example file上的控制台来进行试验

window.addEventListener('keydown', (event) => {
  console.log('keydown', event)
})

setInterval(() => {
  console.log('focusing activeElement', document.activeElement);
  document.activeElement.focus()
}, 2000);

相关问题