如何在JavaScript中获取<embed>标签内PDF阅读器的下一页按钮并模拟点击

嘿，作为JavaScript新手碰到这个需求很正常，我来给你一步步拆解怎么实现从<embed>标签里的PDF阅读器获取下一页按钮并自动点击～

首先要明白：<embed>里的PDF其实是一个嵌套的浏览上下文，和iframe类似，我们得先拿到这个嵌套文档的控制权，再去找里面的按钮元素。不过要注意，不同浏览器的内置PDF阅读器DOM结构差异很大，下面分常见情况给你讲：

一、Chrome/Edge 内置PDF阅读器的情况 #

Chrome和Edge用的是同一款内置阅读器，DOM结构比较固定：

1. 先获取页面上的<embed>元素，等它加载完成后再操作
2. 访问它的contentDocument属性拿到PDF的内部文档
3. 下一页按钮的选择器是#next

给你写个可直接用的代码示例：

// 获取页面上的embed元素
const pdfEmbed = document.getElementById('myPdf');

// 等待PDF完全加载后再执行操作
pdfEmbed.onload = function() {
  try {
    // 获取PDF的内部文档对象
    const pdfInnerDoc = pdfEmbed.contentDocument;
    if (!pdfInnerDoc) {
      console.log('没法访问PDF文档，可能是浏览器安全限制，试试用本地服务器打开页面');
      return;
    }

    // 定位到下一页按钮
    const nextPageBtn = pdfInnerDoc.querySelector('#next');
    if (nextPageBtn) {
      // 先手动模拟点击一次试试
      nextPageBtn.click();

      // 设置自动翻页，比如每3秒翻一页（时间可以自己调）
      const autoTurnInterval = setInterval(() => {
        // 检查按钮是否可用（最后一页时按钮会被禁用）
        if (!nextPageBtn.disabled) {
          nextPageBtn.click();
        } else {
          console.log('已经翻到最后一页啦，停止自动翻页');
          clearInterval(autoTurnInterval);
        }
      }, 3000);
    } else {
      console.log('没找到下一页按钮，可能浏览器更新了阅读器结构');
    }
  } catch (error) {
    console.error('操作时出错了:', error);
  }
};

二、Firefox 内置PDF阅读器的情况 #

Firefox用的是PDF.js，按钮的选择器不一样，把上面代码里的#next换成.toolbarButton.next就行，其他逻辑基本一致：

// 替换这一行
const nextPageBtn = pdfInnerDoc.querySelector('.toolbarButton.next');

重要提醒 #

• 如果直接打开本地HTML文件（file://协议），Chrome可能会阻止访问embed的内部文档，建议用本地服务器打开页面，比如用npx http-server启动一个简单的服务器
• 不同浏览器的阅读器结构可能会随版本更新变化，如果代码失效，打开浏览器开发者工具（F12），手动定位下一页按钮的选择器，替换掉代码里的选择器就行

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