Issue with Load src in iframe in Bootstrap 4 Modal


Topic: Issue with Load src in iframe in Bootstrap 4 Modal

gkondrach pro asked 4 years ago

I need help with upstream Bootstrap 4 issue that affects all MDB. Then the specifics of how to fix in Angular if it's implicated in fix.

Expected behavior

Expect all src to load as it does with documented video examples, and to display.

I'm trying to display remote content that contains JS, and it seems there is a race condition between the iframe loading its JS content and the modal JS dynamically displaying the content before it's fully loaded. Thanks in advance!

Actual behavior

Many non-video src don't load. Modal opens empty. To display content must either reload entire modal or trigger src load from within modal.

It was suggested to me that I change to an empty iframe without a src attribute and when the shown.bs.modal event is triggered (bootstrap modal event) then set the source for the iframe, causing it to load after the modal is visible.

Resources (screenshots, code snippets etc.)

Problem seems upstream in Bootstrap 4 - can be replicated without MDB, as follows from file with CDN for Bootstrap 4 CSS and JS:

HTML

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch modal</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</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 src="https://enactx.h5p.com/content/1291061974592833598/embed" 
        width="1088" height="637" frameborder="0" allowfullscreen="allowfullscreen" 
        allow="geolocation *; microphone *; camera *; midi *; encrypted-media *">
    </iframe><script src="https://enactx.h5p.com/js/h5p-resizer.js" charset="UTF-8"></script>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

CSS @CDN

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

JS @CDN

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>   

Arkadiusz Idzikowski staff commented 4 years ago

Do you use MDB Angular or MDB jQuery? The code is from jQ documentation, you can find Angular models here: https://mdbootstrap.com/docs/angular/modals/basic/


gkondrach pro commented 4 years ago

MDB Angular. What I'm not clear on ... where does that TS go - into app.component.ts? Or do I need to generate a modal component and put it into modal.component.ts? I'm not yet a seasoned Angular user - I'm a noob.


Arkadiusz Idzikowski staff commented 4 years ago

If you need a simple modal, just use the HTML code from the 'basic example'. The 'TS' code should be added to the typescript file, but you only need this version if you want to load modal dynamically (for example from another component).


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.3.1
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: No