Jquery.load HTML 并插入到 bootstrap 模态

Question

我现在有点卡住了。如果有人可以帮助我，我将不胜感激。第一次提问，请多多包涵:)

我有一个带有几个按钮的主页。每个按钮都会打开一个 bootstrap 模式。我能够将动态内容加载到模式中。插入外部 HTML 也可以，但这里有问题....我插入的 HTML 内容也有一些 'fancy' 功能，就像我的主页一样（例如动画进度 bar/skills) 为了使外部 HTML 正常工作，我需要引用与我的主页相同的脚本，但如果是这样，我主页上的内容就会被破坏。

我的问题是，有没有什么方法可以将 HTML 插入到我的模式中，并让插入的 HTML 能够使用我主页上的现有功能？

var iModal = document.getElementById('iModal');
iModal.addEventListener('show.bs.modal', function handler() {
  // Button that triggered the modal
  var button        = event.relatedTarget;
  var modalTitleArg = button.getAttribute('data-bs-title');
  var modalId       = button.getAttribute('data-bs-id');
  var modalTitle    = iModal.querySelector('.modal-title');
  var modalBody     = iModal.querySelector('.modal-body');

  modalTitle.textContent = modalTitleArg;
  if (modalId == 1) {
    $('.modal-body').load('Content1.html', function() {
      $.getScript("js/functions.js") //get script, modal works, broken mainpage.
    });
  } else if (modalId == 2) {
    $('.modal-body').load('Content2.html', function() {
      //$.getScript("js/functions.js") //script reference in html, modal works broken mainpage
    });
  } else {
    $('.modal-body').load('Content3.html', function() {
      //$.getScript("js/functions.js") // no script at all, broken modal, mainpage works fine
    });
  }

  this.removeEventListener('show.bs.modal', handler);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-outline-light mt-2" data-bs-toggle="modal" data-bs-target="#iModal" data-bs-id="1" data-bs-title="Title1">Click me 1</button>
<button type="button" class="btn btn-outline-light mt-2" data-bs-toggle="modal" data-bs-target="#iModal" data-bs-id="2" data-bs-title="Title2">Click me 2</button>
<button type="button" class="btn btn-outline-light mt-2" data-bs-toggle="modal" data-bs-target="#iModal" data-bs-id="3" data-bs-title="Title3">Click me 3</button>

<!-- modal -->
<div class="modal fade" id="iModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="myModalLabel">Title</h3>
        <!-- data-bs-title -->
        <button type="button" class="btn-close btn-sm" data-bs-dismiss="modal" aria-hidden="true"></button>
      </div>
      <div class="modal-body">
        <!-- external html content -->
      </div>
      <div class="modal-footer">

        <button type="button" class="btn-close btn-sm" data-bs-dismiss="modal" aria-hidden="true"></button>
      </div>
    </div>
  </div>
</div>

<script src="js/functions.js"></script>

Answer 1

如果在你的“Content1.html”、“Content2.html”等已经有附加的<script src="js/functions.js"></script>（如在一个简单的网页中），那么你可以简单地添加内容通过 iframe tag (via the src 属性）。您示例中的示例代码部分：

...
<div class="modal-body">
  <iframe class="modal-body-frame"></iframe>
</div>
...
<script>
...
  const modalFrame = document.querySelector('.modal-body-frame');
  if (modalId === 1) modalFrame.src = 'Content1.html';
...
</script>
...

但如果每次都需要将脚本嵌入到内容中，那么可以使用iframe标签的srcdoc属性。下面的示例：

...
<div class="modal-body">
  <iframe class="modal-body-frame" srcdoc=""></iframe>
</div>
...
<script>
...
const modalFrame = document.querySelector('.modal-body-frame');
if (modalId === 1) {
  $.get('Content1.html', function(data) {
    modalFrame.srcdoc = data.replace('</head>', '<script src="js/functions.js"></script></head>');    
  })
}
...
</script>
...

使用框架时，重要的是不要忘记 Feature Policy and the ability to add permission via the allow 属性（示例：<iframe srcdoc="<p>Example test page</p>" allow="fullscreen"></iframe>）。

Jquery.load HTML 并插入到 bootstrap 模态

Jquery.load HTML and insert into bootstrap modal

html

javascript

jquery

modal-dialog

bootstrap-modal