Microsoft Edge iframe环境下PDF页面索引缓存问题及开发解决方案诉求

问题概述 #

Edge浏览器的PDF“从中断处继续”功能，在直接标签页打开PDF时能独立记住每个文件的页码，但在单页面通过iframe切换不同PDF时，会基于父窗口URL统一存储页码——关闭某PDF的iframe后再打开另一PDF，新PDF会跳转到之前的页码，无法为每个PDF维护独立的页码缓存。

开发者端解决方案 #

1. 为每个PDF URL添加唯一标识参数 #

给每个PDF的src添加一个唯一的查询参数（比如PDF文件的哈希值、唯一ID），让Edge将带不同参数的URL识别为独立资源，从而分开存储页码：

// 示例：为PDF URL添加基于文件标识的唯一参数
function getUniquePdfUrl(pdfUrl) {
  // 用PDF的文件名生成唯一标识，实际项目可替换为文件哈希等更可靠的标识
  const pdfId = btoa(pdfUrl.split('/').pop());
  return `${pdfUrl}?pdf-id=${pdfId}`;
}

// 创建iframe时使用处理后的URL
const iframe = document.createElement('iframe');
iframe.src = getUniquePdfUrl('https://example.com/file1.pdf');
document.body.appendChild(iframe);

注意：需确保服务器端忽略这个额外的查询参数，不影响PDF文件的正常返回。

2. 使用PDF.js完全接管PDF渲染 #

放弃使用浏览器自带的PDF阅读器，改用PDF.js库来渲染PDF，自行控制页码的存储与恢复：

• 为每个PDF维护独立的页码记录，存储在localStorage或sessionStorage中，键用PDF的URL作为唯一标识
• 每次打开PDF时，从存储中读取对应页码并跳转，滚动时实时更新存储的页码

示例伪代码：

// 存储当前PDF的页码
function savePdfPage(pdfUrl, pageNum) {
  localStorage.setItem(`pdf-page-${btoa(pdfUrl)}`, pageNum);
}

// 获取PDF的缓存页码
function getSavedPdfPage(pdfUrl) {
  return localStorage.getItem(`pdf-page-${btoa(pdfUrl)}`) || 1;
}

// 初始化PDF.js并跳转至缓存页码
async function loadPdf(pdfUrl) {
  const pdf = await pdfjsLib.getDocument(pdfUrl).promise;
  const pageNum = getSavedPdfPage(pdfUrl);
  const page = await pdf.getPage(pageNum);
  // 渲染页面逻辑...
  
  // 监听页码切换事件，保存页码
  pdfViewer.addEventListener('pagechange', () => {
    savePdfPage(pdfUrl, pdfViewer.currentPageNumber);
  });
}

这种方案完全脱离浏览器自带的PDF缓存机制，彻底解决冲突问题，还能自定义PDF的展示样式。

3. 临时启用私有窗口（不推荐） #

通过window.open在私有窗口中打开PDF iframe，但会破坏用户体验，且需要用户授权，仅作为临时替代方案，不建议在生产环境使用。

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