技术问询：如何将焦点移入嵌入式PDF文档以支持键盘导航

嘿，我来帮你搞定这个嵌入式PDF的键盘导航焦点问题！

当用户打开页面里的嵌入式PDF文档时，我们可以通过监听iframe的onload事件，自动把焦点转移到PDF所在的框架里，这样用户就能直接用键盘的上箭头、下箭头、Home、End、PgUp、PgDn这些快捷键来导航文档了。

具体实现代码 #

直接给你的PDF嵌入iframe绑定load事件，调用focus()方法就行：

// 选中加载PDF的iframe，绑定load事件
const pdfIframe = document.querySelector('iframe[src$=".pdf"]');
if (pdfIframe) {
  pdfIframe.addEventListener('load', function() {
    this.focus(); // 把焦点移入PDF所在的iframe
  });
}

浏览器兼容性说明 #

• 对于<iframe>元素，这个方法在除IE Explorer和旧版Microsoft Edge之外的所有主流浏览器（Chrome、Firefox、Safari等）都能正常生效
• 如果是使用其他类型的frame元素（比如现在几乎淘汰的<frame>），核心逻辑还是加载完成后调用focus()，只是需要调整元素选择的方式

内容的提问来源于stack exchange，提问作者ardeley