通过 Chrome 使用 pdf 文档的窗口事件答案

【问题标题】：Window events with pdf document via Chrome通过 Chrome 使用 pdf 文档的窗口事件
【发布时间】：2019-11-05 00:05:54
【问题描述】：

我会制作一个最小的示例，但我无法让 Chrome PDF 查看器在 jsfiddle 中工作，所以我不确定如何显示它。

但本质上，我有一个可调整大小的 div，它周围有句柄，它工作正常。但是，当我添加填充屏幕的 Adobe PDF 对象时，调整大小不再正常工作。我所依赖的大小调整器

每个调整大小的 mousedown 都会触发添加窗口 mousemove 和 mouseup 事件侦听器
该窗口 mousemove 事件会根据需要进行所有大小调整
window mouseup 时，window 事件监听器被移除

看来，如果我为 pdf 对象设置 display:none，则调整大小可以正常工作。经过进一步测试，只要光标没有太快地超出 div 调整器，调整器似乎也可以工作，这似乎表明当光标移动超出调整器/div 并且是在 PDF 对象界面中？所以，我想弄清楚即使在 Chrome 的 PDF 查看器中，如何强制触发窗口事件 - 我该怎么做？

编辑：

1.还尝试使窗口小于屏幕。当光标拖动超出 Chrome 窗口时，大小调整器允许在 Chrome 窗口之外更改大小，并且仅当光标在 Chrome 显示的 PDF 对象周围移动时它才不起作用。这表明底层代码似乎可以正常工作，问题在于当光标位于 Chrome pdf 对象上时如何处理窗口事件。

2.我也尝试过创建一个跨越整个屏幕的虚拟包装器。尽管它是事件冒泡的最底层（虚拟 div 包含嵌入式对象和可调整大小的 div），但事件处理仍然没有得到它，这让我认为 Chrome 不知何故在其查看器中具有一些停止事件传播代码相关联与embed。想知道是否有办法抑制不在那里传播......

【问题讨论】：

标签： javascript google-chrome dom-events

【解决方案1】：

我不知道有什么方法可以绕过 Chrome 自己的查看器的事件传播控件，但 PDF.js 来拯救！

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

PDF.js 带有一个查看器，只要它不是 X 域，就可以获取 URL 文件。只要您对托管 PDF 文件的域具有管理权限，您就可以将 PDF.js 放在同一个域下，并通过 iframe 使用适当的 URL 嵌入查看器，并通过 ?file=%FILENAME% 查询字符串并显示 PDF 文件如所须。然后事件将传播到一个虚拟 div 之类的东西，window 事件仍然可以正常工作。

【讨论】：