Open iframe by clicking and downloading when you close it

Question

I am trying to implement on a portal with revenues, expenses, etc. I am using iframes to bring the information from the server. It works well, until I realized that if I load all the iframes all at once it shuffles the functions of each iframe because when you carry a iframe, he carries everyone within the function. So I need a code that does the iframe open at click and download when you close it.

    window.onload = function() {
    //Receitas
    document.getElementById("iframe1").src="LINK_IFRAME1";
    document.getElementById("iframe2").src="LINK_IFRAME2";
    //Despesas
    document.getElementById("iframe3").src="LINK_IFRAME3";
    document.getElementById("iframe4").src="LINK_IFRAME4";
    document.getElementById("iframe5").src="LINK_IFRAME5";
    document.getElementById("iframe6").src="LINK_IFRAME6";
}

In html I’m bringing them so:

<div class="modal fade" id="ingresso-de-receitas">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" class="blank" title="Fechar" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title">Ingresso de receitas</h2>
                </div>
                <div class="modal-body text-center">
                    <iframe id="iframe1" width="100%" height="900px" frameborder="none"></iframe>
                </div>
            </div>
        </div>
    </div>

Does anyone have any idea how to solve?

Answer 1

I was able to solve it this way:

1° I create the modal normal, now where the iframe which in this case was in modal-body left so:

HTML

<iframe width="100%" height="900px" frameborder="none"></iframe>

In Javascript I used so:

$('#MyModal').on('show.bs.modal', function () {
$('#MyModal iframe').attr('src','LINK EXTERNO OU INTERNO');
})
$('#MyModal').on('hide.bs.modal', function () {
$('#MyModal iframe').removeAttr('src');
})

Thus the modal opens, loads link and when closing the modal unloads the iframe.

Works very well for those who use video sites. And does not leave the site heavy when loading the page at the beginning, only loading the modal the moment it is open.