如何在点击Bootstrap模态框外部时清除iframe的src属性

要实现点击模态框外部关闭时清除iframe的src属性，你可以借助Bootstrap模态框的内置事件来处理，具体步骤如下：

方法一：使用jQuery实现 #

1. 给模态框和iframe分别设置ID，比如videoModal和videoIframe：

<div class="modal fade" id="videoModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <iframe id="videoIframe" src="你的视频地址" width="100%" height="315" frameborder="0"></iframe>
      </div>
    </div>
  </div>
</div>

2. 监听模态框的hide.bs.modal事件，判断是否为外部点击触发的关闭，再清除iframe的src：

// 提前保存视频的原始地址，方便打开模态框时重新加载
const originalVideoSrc = $('#videoIframe').attr('src');

// 模态框打开时恢复视频地址
$('#videoModal').on('show.bs.modal', function () {
  $('#videoIframe').attr('src', originalVideoSrc);
});

// 判断是否点击外部关闭，清除iframe的src
$('#videoModal').on('hide.bs.modal', function (event) {
  if ($(event.target).hasClass('modal')) {
    $('#videoIframe').attr('src', '');
  }
});

方法二：原生JavaScript实现 #

如果不想依赖jQuery，也可以用原生JS完成：

<!-- 同样先给模态框和iframe设置ID -->
<div class="modal fade" id="videoModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <iframe id="videoIframe" src="你的视频地址" width="100%" height="315" frameborder="0"></iframe>
      </div>
    </div>
  </div>
</div>

const videoModal = document.getElementById('videoModal');
const videoIframe = document.getElementById('videoIframe');
const originalSrc = videoIframe.src;

// 模态框打开时恢复视频地址
videoModal.addEventListener('show.bs.modal', function() {
  videoIframe.src = originalSrc;
});

// 监听关闭事件，判断是否为外部点击
videoModal.addEventListener('hide.bs.modal', function(event) {
  if (event.target.classList.contains('modal')) {
    videoIframe.src = '';
  }
});

关键说明 #

• hide.bs.modal是Bootstrap模态框开始关闭时触发的事件，能在模态框完全隐藏前处理视频停止逻辑。
• 点击模态框外部时，事件的target会指向带有modal类的背景元素，通过这个特征可以区分是否为外部点击触发的关闭。
• 清除iframe的src属性会直接终止视频播放，避免后台持续占用资源。

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