Bootstrap4模态框中AJAX加载页面的Script无法执行问题求助

首先，你遇到的问题是Bootstrap模态框默认处理远程内容时，会过滤或不执行其中的<script>标签——这是出于安全和默认行为的设计，毕竟动态执行远程脚本存在风险。下面给你两种可行的修复方案，以及更直接的优化思路：

方案一：利用模态框加载完成事件手动执行脚本 #

Bootstrap模态框提供了loaded.bs.modal事件，这个事件会在远程内容完全加载到模态框后触发。我们可以在这个事件里提取并重新注入脚本，强制执行：

// 假设你的模态框ID是bookingModal
$('#bookingModal').on('loaded.bs.modal', function() {
  const $modalBody = $(this).find('.modal-body');
  // 取出模态框里的所有script标签
  const remoteScripts = $modalBody.find('script');

  remoteScripts.each(function() {
    const newScript = document.createElement('script');
    // 复制原脚本的属性（比如src、type）
    if ($(this).attr('src')) {
      newScript.src = $(this).attr('src');
    } else {
      // 如果是内联脚本，直接复制内容
      newScript.textContent = $(this).text();
    }
    // 注入到模态框中执行
    $modalBody.append(newScript);
    // 移除原脚本标签，避免重复执行
    $(this).remove();
  });
});

这个方法的好处是不需要修改你的远程页面结构，直接在现有基础上修复脚本执行问题。

方案二：跳过远程页面，直接注入目标脚本（更优方案） #

既然你的远程页面本质上只包含一个加载支付IFrame的脚本，那完全可以跳过加载整个页面的步骤，直接在模态框触发时动态插入脚本到modal-body中，这样更高效也更可控：

$('#bookingModal').on('show.bs.modal', function() {
  const $modalBody = $(this).find('.modal-body');
  // 先清空模态框内容，避免重复加载脚本
  $modalBody.empty();

  // 创建新的script标签
  const paymentScript = document.createElement('script');
  // 替换成你支付应用脚本的直链
  paymentScript.src = '/booking-app-1/payment-script.js';
  
  // 可选：添加脚本加载完成的回调，比如隐藏加载动画
  paymentScript.onload = function() {
    console.log('支付应用脚本加载完成');
  };

  // 将脚本插入模态框
  $modalBody.append(paymentScript);
});

额外注意事项 #

1. 缓存问题：如果脚本加载后没有更新，可以在URL后加时间戳参数（比如/booking-app-1/payment-script.js?v=123）避免浏览器缓存旧脚本。
2. 安全风险：确保你加载的脚本来源是可信的，避免引入XSS攻击风险。
3. 重复执行问题：如果模态框会多次打开，记得在每次打开前清空modal-body，或者判断脚本是否已经存在，防止重复注入。

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