如何使iFrame内嵌PDF中的超链接在全页面而非iFrame窗口打开

方法1：用PDF.js自定义渲染（推荐方案） #

原生iframe渲染PDF时，链接的打开逻辑由内置PDF阅读器控制，无法直接修改。通过PDF.js可以完全掌控PDF渲染和链接行为，实现点击链接在新标签页打开。

实现代码： #

<!-- 用于展示PDF的容器 -->
<div id="pdf-container" style="width:100%; height:550px; position: relative;"></div>

<!-- 引入PDF.js核心库及Worker脚本 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script>
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
  
  const pdfUrl = 'https://www.wildeones.com/wp-content/uploads/2022/06/Ring-Size-Chart.pdf';

  // 加载PDF文档
  pdfjsLib.getDocument(pdfUrl).promise
    .then(pdf => {
      // 渲染第一页（多页PDF可循环处理所有页面）
      return pdf.getPage(1);
    })
    .then(page => {
      const scale = 1.5;
      const viewport = page.getViewport({ scale });
      
      // 创建Canvas用于渲染PDF内容
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = viewport.width;
      canvas.height = viewport.height;
      document.getElementById('pdf-container').appendChild(canvas);

      // 渲染PDF页面到Canvas
      page.render({
        canvasContext: ctx,
        viewport: viewport
      });

      // 获取页面中的所有链接注解
      return page.getAnnotations();
    })
    .then(annotations => {
      annotations.forEach(anno => {
        // 筛选出URL类型的链接注解
        if (anno.subtype === 'Link' && anno.url) {
          // 创建透明覆盖层拦截点击事件
          const linkOverlay = document.createElement('div');
          linkOverlay.style.position = 'absolute';
          linkOverlay.style.left = `${anno.rect[0]}px`;
          linkOverlay.style.top = `${anno.rect[1]}px`;
          linkOverlay.style.width = `${anno.rect[2] - anno.rect[0]}px`;
          linkOverlay.style.height = `${anno.rect[3] - anno.rect[1]}px`;
          linkOverlay.style.cursor = 'pointer';
          
          // 点击时在新标签页打开目标URL
          linkOverlay.addEventListener('click', () => {
            window.open(anno.url, '_blank');
          });
          
          document.getElementById('pdf-container').appendChild(linkOverlay);
        }
      });
    })
    .catch(err => console.error('PDF加载失败:', err));
</script>

说明： #

通过Canvas渲染PDF内容，再为每个链接区域添加透明点击层，完全接管链接的打开逻辑，不受浏览器PDF阅读器限制，兼容性和可控性最强。

方法2：监听iframe跳转（仅同域场景可用） #

如果PDF文件与当前页面属于同一域名（你的场景满足此条件），可以尝试监听iframe的跳转事件，拦截后在父窗口打开链接：

实现代码： #

<iframe id="pdf-frame" src="https://www.wildeones.com/wp-content/uploads/2022/06/Ring-Size-Chart.pdf" width="100%" height="550px"></iframe>

<script>
  const iframe = document.getElementById('pdf-frame');
  iframe.addEventListener('beforeunload', (e) => {
    const targetUrl = iframe.contentWindow.location.href;
    if (targetUrl !== iframe.src) {
      window.open(targetUrl, '_blank');
      e.preventDefault();
    }
  });
</script>

说明： #

局限性：浏览器同源策略限制仅同域可用，且部分PDF阅读器的跳转行为可能不会触发beforeunload事件，可靠性不如方法1。

方法3：修改PDF本身的链接属性（最直接） #

若你有权限重新生成PDF，可在Google Sheets中设置超链接时指定打开方式，再重新导出PDF：

• 打开Google Sheets中的尺码表，右键点击带链接的单元格选择「编辑链接」
• 若支持设置打开方式，选择「在新窗口打开」；若不支持，可尝试将链接改为javascript:window.open('目标URL', '_blank');void(0);（注：Google Sheets可能屏蔽此类脚本链接）
• 重新导出PDF并替换原文件

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