Set iframe contents using jQuery

by Andy Bulka

HTML

<div class="main">
    <iframe id="iframe1">
    <iframe>
</div>

CSS

#iframe1 {
    border: solid 1px;
    border-radius: 8px;
    width: 80%;
    min-height: 80%;
    max-height: 80%;
    color: red;
    padding-top: 1em;
    margin: 0 auto;
}

JavaScript

$('#iframe1').contents().find('html').html("<h1 style='text-align: center;'>This IS an iframe</h1>");