Add custom HTML in iFrame that already has a page loaded in it

Question

I have a button and an iframe. When button is clicked, it opens a page in the iframe. I have another button, when it is clicked, it is supposed to add custom html to the already loaded page in the iframe, but it is not working.

HTML:

<a href="#" onclick="site_load_1();" id="site_button_1">Load page in Iframe</a>
<a href="#" onclick="update_iframe();">Update iframe</a>
<iframe src="" width="100%" height="500px" id="main_iframe"></iframe>

The jQuery to load page in iframe is working fine:

function site_load_1() {
    $('#main_iframe').attr('src', "https://bing.com");
}

The jQuery to update iframe with custom html is not working:

function update_iframe() {
    var myFrame = $("#main_iframe").contents().find('body');
    var newContent = "<h1>hello</h1>";
    myFrame.html(newContent);
}

However, it does work when the iframe is empty, as in, when page has not been loaded into it via the first button.