使用 iFrame 关闭外部单击页面上的菜单

Question

我正在尝试使用on this answer 概述的技巧来关闭我设计的页面上的导航菜单。但是，页面上的大部分空间被 iframe 占用，该 iframe 加载存储在与包含 iframe 的页面相同的服务器上的文章。

如果我单击父页面上的任何元素，菜单会正常关闭。但是，单击 iframe 中的任何空间都不会关闭菜单。

我假设这是因为父页面没有捕获 iframe 内部发生的事件。就像我说的，两个页面都存储在同一台服务器上，那么当用户在 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：（添加是因为我想到它可能会影响某些事情）

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

Working Demo

代替

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

使用

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

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

Answer 2

当 iframe 位于不同的域时，contents().click() 不起作用。尝试进行 contents() 调用时会出现跨域访问错误。