Jquery.load HTML and insert into bootstrap modal

Question

I'm kind of stuck at the moment. Would really appreciate if someone can help me with this. First time asking a question, so please bear with me:)

I have a main page with a few buttons. Each button opens a bootstrap modal. I am able to load dynamic content into the modal. Also inserting external HTML works, but here's the catch.... The HTML content I insert also has some 'fancy' features like my main page has (ex. animated progress bar/skills) For the external HTML to work I need to reference the same script as my main page has, but if so, things on my main page gets broken.

My question is, is there any way that I can insert HTML into my modal and have the inserted HTML be able to use the existing functions on my main page?

 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

If in your "Content1.html", "Content2.html" etc. there is already an attached <script src="js/functions.js"></script> (as in a simple web page), then you can add content simply through an iframe tag (via the src attribute). Sample part of the code from your example:

...
<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>
...

But if you need to embed the script into the content every time, then you can use the srcdoc attribute of the iframe tag. Example below:

...
<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>
...

When using frame, it is important not to forget about Feature Policy and the ability to add permission via the allow attribute (Example: <iframe srcdoc="<p>Example test page</p>" allow="fullscreen"></iframe> ).