如何为PHP foreach生成的按钮实现PDF打开功能？

方法1：直接在按钮的onclick中传入PDF路径 #

在PHP遍历生成按钮时，直接把PDF的完整路径作为参数传给JavaScript函数，点击按钮时调用该函数更新iframe的源地址。

示例代码：

<?php
// 替换为你的PDF存储目录
$pdfFiles = glob('./pdfs/*.pdf');
?>

<!-- 用于展示PDF的iframe -->
<iframe id="pdfViewer" width="100%" height="600px"></iframe>

<div class="pdf-buttons">
<?php foreach ($pdfFiles as $pdfPath): ?>
    <?php
    // 提取文件名作为按钮显示文本
    $fileName = basename($pdfPath);
    ?>
    <button onclick="openPdf('<?php echo htmlspecialchars($pdfPath); ?>')">
        <?php echo htmlspecialchars($fileName); ?>
    </button>
<?php endforeach; ?>
</div>

<script>
function openPdf(pdfPath) {
    const viewer = document.getElementById('pdfViewer');
    viewer.src = pdfPath;
}
</script>

注意：用htmlspecialchars()转义路径，避免XSS风险和特殊字符导致的语法错误。

方法2：使用data-*属性存储路径 + 事件委托（更推荐） #

这种方法无需给每个按钮单独绑定onclick，通过父元素的事件委托统一处理点击，更高效且易于维护。

示例代码：

<?php
// 替换为你的PDF存储目录
$pdfFiles = glob('./pdfs/*.pdf');
?>

<iframe id="pdfViewer" width="100%" height="600px"></iframe>

<!-- 父容器用于事件委托 -->
<div id="pdfButtonContainer">
<?php foreach ($pdfFiles as $pdfPath): ?>
    <?php
    $fileName = basename($pdfPath);
    $escapedPath = htmlspecialchars($pdfPath);
    ?>
    <button data-pdf-path="<?php echo $escapedPath; ?>">
        <?php echo htmlspecialchars($fileName); ?>
    </button>
<?php endforeach; ?>
</div>

<script>
const container = document.getElementById('pdfButtonContainer');
const viewer = document.getElementById('pdfViewer');

container.addEventListener('click', function(e) {
    // 确认点击的是按钮元素
    if (e.target.tagName === 'BUTTON') {
        const pdfPath = e.target.dataset.pdfPath;
        if (pdfPath) {
            viewer.src = pdfPath;
        }
    }
});
</script>

这种方式的优势：

• 不为每个按钮绑定独立事件，减少内存占用
• 后续动态添加按钮时，无需重新绑定事件
• 分离HTML与JS逻辑，代码结构更清晰

如果PDF文件分布在多层子目录中，可调整glob的路径规则（比如glob('./pdfs/**/*.pdf', GLOB_BRACE)），确保PHP能正确遍历到所有目标文件。

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