Closing Menu on Outside Click on page with iFrames

Question

I'm trying to use the trick outlined on this answer to close a navigation menu on a page I've designed. However, the majority of the space on the page is taken up by an iframe that loads articles stored on the same server as the page containing the iframe.

If I click on any of the elements on the parent page, the menu closes as it should. However, clicking on any of the space within the iframe does not close the menu.

I'm assuming this is because the parent page does not capture events happening inside of the iframe. Like I've said, both pages are stored on the same server, so how can I capture the click to close my menu when the user clicks within the iframe?

HTML:

<div id="menucontainer">
<nav id="mobilemenu">
    <ul>
        <li><span class="menutrigger">&#9776; Menu</span></li>
    </ul>
</nav>
<nav id="fullmenu">
    <ul>
        <li><a href="page1.html" target="content">Menu Item 1</a></li>
        <li><a href="page2.html" target="content">Menu Item 2</a></li>
        <li><a href="page3.html" target="content">Menu Item 3</a></li>
        <li><a href="page4.html" target="content">Menu Item 4</a></li>
    </ul>
</nav>
</div>
<div id="frame">
        <iframe name="content" id="content" src="intro.html"></iframe>
</div>

JQuery:

$(document).ready(function() {
    $("a[target='content']").click(function() {
        if ($("#mobilemenu").css("display") == "block" ){
            $('#fullmenu').hide();
        }
    });
    $('html').click(function() {
        $('#fullmenu').hide();
    });
    $('#menucontainer').click(function(event){
        event.stopPropagation();
    });
    $('.menutrigger').click(function() {
        $('#fullmenu').toggle();
    });
});

CSS: (Added because it occurred to me it might be affecting things)

html, body { height: 100%; width: 100%; }

nav, #frame { position: absolute; right: 0; left: 0; padding: 0; margin: 0; width: 100%; }

#content { height: 100%; width: 100%; }

#frame { top: 38px; bottom: 14px; }

nav { width: 100%; z-index: 100; }

#fullmenu { display: none; position: absolute; top: 38px; width: 100%; }

#mobilemenu { display: block; height: 38px; top: 0; background: #333; }

.menutrigger { font-size: 20px; font-weight: bold; padding: 1px 8px; color: #FFF; cursor: pointer; }

#frame { top: 38px; bottom: 14px; }

nav ul { position: relative; width: 100%; background: #333; list-style: none; display: inline-block; padding: 0; }

nav ul:after { clear: both; }

nav ul li { height: 29px; float: none; min-width: 110px; font-size: 14px; padding: 4px 4px; font-family: 'Roboto Condensed', sans-serif; }

nav ul li a { display: block; padding: 5px; color: #FFF; text-decoration: none; }

nav ul li:hover { background: #666; display: inline-block; height: 29px; }

nav ul li:hover a { color: #FFF; }

Answer 1

The contents().click() does not work when the iframe is on a different domain. You'll get a cross-domain access error attempting to make the contents() call.

Answer 2

Working Demo

Instead of

$('html').click(function() {
    $('#fullmenu').hide();
});

use

$('html').click(function() {
    $('#fullmenu').hide();
});

//get iframe contents and bind click on them.
$('#content').contents().click(function(){
    $('#fullmenu').hide();
});

Answer 3

For iframes with different domains, my solution is to send an event from the iframe with Post Message API and listen to it on the parent. This way the parent can perform any action when the iframe is clicked.

In parent page:

window.addEventListener("message", (event) => {
  // DO SOMETHING
}, false);

In iframe:

window.addEventListener("click", (event) => {
  parent.postMessage("click", "*");
}, false);