本文详解如何将 HTML 元素中通过 data-* 属性传递的动态值（如订单号）捕获后，实时拼接到 标签的 src 属性中，实现 PDF 文件按需加载与展示。
本文详解如何将 html 元素中通过 `data-*` 属性传递的动态值（如订单号）捕获后，实时拼接到 `
在使用 Bootstrap 模态框（Modal）展示动态内容时，常需将外部数据（如订单 ID、单据编号等）传入模态框，并进一步用于构造资源 URL（例如 PDF 路径）。你已成功通过 data-val 传递 $row['order_id'] 并在模态框中获取为 myVal 变量——这正是关键起点。
接下来，只需定位模态框内的 <embed></embed> 元素，并用 jQuery 的 .attr() 方法动态更新其 src 属性即可。注意：HTML 中 <embed></embed> 是自闭合标签，但为兼容性建议保留结束标签（或统一用 <iframe></iframe> 更稳妥，后文会说明）。
✅ 正确实现步骤（含完整代码）
-
确保模态框 HTML 中包含带唯一标识的
<embed></embed>元素（推荐添加id="pdf-embed"便于精准选取）：
<!-- 模态框结构示例 -->
<div class="modal fade" id="my-modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">运单预览</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<!-- embed 元素需有明确 ID 或 class，便于 JS 定位 -->
<embed
id="pdf-embed"
type="application/pdf"
frameBorder="0"
scrolling="auto"
height="70%"
width="100%"
>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>-
在
show.bs.modal事件中更新 embed 的 src（修正原脚本中的拼接逻辑与选择器）：
<script>
$('#my-modal').on('show.bs.modal', function (event) {
// 获取触发按钮上的 data-val 值（即 order_id）
var myVal = $(event.relatedTarget).data('val');
// 构造 PDF 完整 URL（注意：确保服务器路径真实存在且可公开访问）
var pdfUrl = 'https://www.xx-xxxxx.com/image/waybill/ICE000' + myVal + '.pdf';
// 定位模态框内的 embed 元素并设置 src
$(this).find('#pdf-embed').attr('src', pdfUrl);
// 【可选】同时更新 modal-body 文本以作视觉反馈（非必需）
$(this).find('.modal-body').prepend('<p class="small text-muted mb-2">正在加载运单：' + myVal + '</p>');
});
</script>⚠️ 注意事项与最佳实践
-
路径安全性与有效性：确保
myVal不含非法字符（如/,..,, <code>>），否则可能引发路径遍历或 XSS 风险。生产环境建议服务端校验并转义，前端可简单过滤：var cleanVal = myVal.toString().replace(/[^a-zA-Z0-9_-]/g, '');
PDF 加载失败处理：
<embed></embed>本身不提供加载失败回调。如需错误提示，推荐改用<iframe></iframe>+onerror事件，或配合fetch()预检文件是否存在。-
浏览器兼容性：现代浏览器均支持
<embed src="*.pdf"></embed>，但部分内网环境或旧版 IE 可能受限。更健壮方案是使用<iframe></iframe>：<iframe id="pdf-iframe" width="100%" height="500px" frameborder="0"></iframe>
对应 JS 更新：
$(this).find('#pdf-iframe').attr('src', pdfUrl); 避免重复绑定：确保该事件监听器仅注册一次（例如放在
$(document).ready()内），防止多次点击导致重复执行。
✅ 总结
你已掌握核心能力：*从 DOM 元素提取 `data-值 → 在 JS 中拼接字符串 → 用.attr()动态写入
