点击按钮时如何将data-jobid值传入模态框内iframe的src属性？

这是Bootstrap模态框结合iframe的典型场景，我给你两种实用的实现方案，分别适配jQuery（Bootstrap常用搭配）和原生JavaScript环境：

方案1：利用Bootstrap模态框内置事件（jQuery版本） #

Bootstrap的模态框提供了show.bs.modal事件，它会在模态框开始显示前触发，刚好适合我们在这个时机传递链接给iframe。

首先确保你的模态框结构完整（示例结构）：

<!-- 模态框容器 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Job Details</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- 你的iframe -->
        <iframe style="display: block; width: 100%; height: 500px; border: none;" src=""></iframe>
      </div>
    </div>
  </div>
</div>

然后添加jQuery代码：

// 监听模态框的显示前事件
$('#myModal').on('show.bs.modal', function (event) {
  // 获取触发模态框的按钮元素
  const triggerBtn = $(event.relatedTarget);
  // 从按钮的data-jobid属性中取出目标链接
  const jobLink = triggerBtn.data('jobid');
  // 找到模态框内的iframe，设置其src属性
  $(this).find('iframe').attr('src', jobLink);
});

// 可选：模态框关闭时重置iframe的src，避免下次打开显示旧内容
$('#myModal').on('hidden.bs.modal', function () {
  $(this).find('iframe').attr('src', '');
});

代码说明 #

• event.relatedTarget是Bootstrap传递的特殊参数，指向触发模态框的那个按钮
• data('jobid')方法可以直接读取按钮上的data-jobid属性值
• 监听hidden.bs.modal事件重置src是优化体验的小细节，避免残留之前的内容

方案2：原生JavaScript版本（无需jQuery） #

如果你的项目没有引入jQuery，用原生JS也能实现同样的效果：

// 获取所有触发模态框的按钮、模态框本身和内部的iframe
const modalTriggers = document.querySelectorAll('a[data-toggle="modal"][data-jobid]');
const modal = document.getElementById('myModal');
const iframe = modal.querySelector('iframe');

// 方法1：监听按钮点击事件
modalTriggers.forEach(btn => {
  btn.addEventListener('click', function() {
    // 读取data-jobid的值（dataset是原生JS读取data属性的API）
    const jobLink = this.dataset.jobid;
    iframe.src = jobLink;
  });
});

// 方法2：监听模态框的show事件（和jQuery方案逻辑一致）
modal.addEventListener('show.bs.modal', function(event) {
  const triggerBtn = event.relatedTarget;
  const jobLink = triggerBtn.dataset.jobid;
  iframe.src = jobLink;
});

// 可选：关闭时重置iframe
modal.addEventListener('hidden.bs.modal', function() {
  iframe.src = '';
});

注意事项 #

• 确保你已经正确引入了Bootstrap的JS文件（无论用哪种方案，Bootstrap核心JS都是必须的）
• 如果目标链接是跨域地址，浏览器可能会有同源策略限制，需要目标网站允许跨域嵌入
• 可以根据需求调整iframe的高度，比如设置为calc(100vh - 150px)来适配不同屏幕尺寸

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