You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

求助:使用frameset实现左侧PDF列表+右侧预览面板功能

实现左侧PDF列表+右侧预览的frameset方案

核心问题解决思路

你用frameset拆分页面后没实现预览,主要是没给右侧框架设置name属性,同时链接没指定target指向这个框架。以下是完整可运行的代码示例:


主页面(index.html)

<!DOCTYPE html>
<html>
<frameset cols="25%,75%">
  <!-- 左侧PDF列表框架 -->
  <frame src="pdf-links.html" name="pdfList">
  <!-- 右侧PDF预览框架,必须设置name属性 -->
  <frame src="about:blank" name="pdfViewer">
</frameset>
<noframes>
  <body>你的浏览器不支持框架,请使用现代浏览器。</body>
</noframes>
</html>
<!DOCTYPE html>
<html>
<body>
  <h3>PDF文件列表</h3>
  <!-- 链接的target必须和右侧框架的name一致 -->
  <ul>
    <li><a href="sample1.pdf" target="pdfViewer">示例PDF 1</a></li>
    <li><a href="sample2.pdf" target="pdfViewer">示例PDF 2</a></li>
    <li><a href="sample3.pdf" target="pdfViewer">示例PDF 3</a></li>
  </ul>
</body>
</html>

关键注意事项

  • 确保右侧框架的name属性值(这里是pdfViewer)和链接的target属性完全匹配,大小写敏感
  • PDF文件要和HTML文件放在同一目录,或者使用正确的相对/绝对路径
  • 现代浏览器大多支持直接预览PDF,如果需要兼容旧浏览器,可以考虑嵌入PDF.js这类库
  • 注意:<frameset>是HTML5中已废弃的标签,若要做更现代的页面,推荐用<div>布局+<iframe>实现(原理类似,把右侧预览换成iframe并设置name)

内容的提问来源于stack exchange,提问作者KARAN DODIYA

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.21 20:48:46