Function load() open iframe

Question

I have the code below that works perfectly.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript">
    function loadModal(){
        $('#injetada').load('teste.html');
    }
</script> 

<a onclick="loadModal()" class="btn btn-default btn-sm" data-toggle="modal" data-target="#1">Verificar</a>
 <div id="1" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <div id='injetada' width="900px" height="600px"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
 </div>

However, I would like the page to be opened with an iframe. That is, in:

$('#injetada').load('teste.html'); 

might be

$('#injetada').load('<iframe src="teste.html" width="900" height="600"></iframe>');

I imagine I’m using the wrong syntax to call an iframe here, but I couldn’t find a site with the right syntax. Can you help me?

Answer 1

You can simply inject an HTML with a iframe in div without the need to use .load():

function loadModal(){
   $('#injetada').html('<iframe src="teste.html" width="900" height="600"></iframe>');
}

Noting that this syntax width and height down you are using is invalid:

<div id='injetada' width="900px" height="600px"></div>

If you want to define the dimensions of div, you can do it two ways:

Inline:

<div id='injetada' style="width: 900px; height: 600px;"></div>

Or in the CSS:

#injetada{
   width: 900px;
   height: 600px;
}

Jsfiddle example