如何在网页中通过iFrame实现双PDF并排对比及文档切换功能

问题原因 #

你当前代码无法分别控制两个iframe的核心问题是重复定义了同名函数：JS中后声明的link1/link2/link3函数会直接覆盖前面的定义，导致所有按钮点击后只会修改右侧frame2的加载地址。

优化实现方案 #

下面是更简洁、易维护的实现，无需定义大量重复函数，后续新增PDF版本时只需要添加对应按钮即可：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex,nofollow">
    <title>Illustrations of Masonry</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
    <script defer src="js/fontawesome-all.min.js"></script>
</head>
<body>
<section class="hero is-link">
    <div class="hero-body">
        <p class="title">Illustrations of Masonry</p>
        <p class="subtitle">Compare Editions</p>
    </div>
</section>

<section>
    <div class="container mt-4">
        <div class="columns is-centered">
            <!-- 左侧PDF面板 -->
            <div class="column">
                <div class="buttons mb-3">
                    <!-- 自定义属性：data-target指定控制的iframe，data-pdf指定PDF文件名 -->
                    <button class="button is-small is-primary" data-target="frame1" data-pdf="1772.pdf">1772版</button>
                    <button class="button is-small is-primary" data-target="frame1" data-pdf="1775.pdf">1775版</button>
                    <button class="button is-small is-primary" data-target="frame1" data-pdf="1781.pdf">1781版</button>
                </div>
                <iframe id="frame1" src="pdf/1772.pdf" width="100%" height="1000">
                    <p>Your browser does not support iFrames.</p>
                </iframe>
            </div>
            <!-- 右侧PDF面板 -->
            <div class="column">
                <div class="buttons mb-3">
                    <button class="button is-small is-primary" data-target="frame2" data-pdf="1772.pdf">1772版</button>
                    <button class="button is-small is-primary" data-target="frame2" data-pdf="1775.pdf">1775版</button>
                    <button class="button is-small is-primary" data-target="frame2" data-pdf="1781.pdf">1781版</button>
                </div>
                <iframe id="frame2" src="pdf/1781.pdf" width="100%" height="1000">
                    <p>Your browser does not support iFrames.</p>
                </iframe>
            </div>
        </div>
    </div>
</section>

<script>
// 统一绑定所有PDF切换按钮的点击事件
document.querySelectorAll('button[data-pdf]').forEach(btn => {
    btn.addEventListener('click', () => {
        // 获取要控制的iframe和要加载的PDF地址
        const targetFrame = document.getElementById(btn.dataset.target);
        // 这里替换成你自己的PDF根路径即可
        targetFrame.src = `http://www.tlhinteractive.com/preston/pdf/${btn.dataset.pdf}`;
    })
})
</script>
</body>
</html>

其他可选方案 #

如果需要更丰富的PDF控制能力（比如双栏同步滚动、页码跳转、文本搜索），也可以用PDF.js开源库实现渲染，iframe方案是当前需求下最简便的实现方式。

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