javascript - 如何将 jQuery 函数应用于 iframe 中的子页面？

Question

这是一个脑筋急转弯：

我在窗口中有一个 iframe，还有一个链接到它的导航栏：

<div class="nav">
<a href="link.html" target="iframe-content" id='debug">#Debug<a>
</div>

<iframe name="iframe-content" src="page.html"></iframe>

然后，当单击导航中的链接时，我有一个简单的 jQuery 函数来插入一个类。

$(window).load(function() {
    $("#debug").click(function() {
        $('body').toggleClass("debug");
    });
});

现在我的问题是如何让切换类应用于内联框架（page.html）而不是父页面？

Answer 1

改变

$('body').toggleClass("debug");

至

$('#debug').contents().find('body').toggleClass("debug");

查看jQuery 文档.contents()

Answer 2

var $iframe = $('iframe[name="iframe-content"]').contents();
$iframe.find('#debug').click(function(){
    $iframe.find('body').toggleClass('debug');
});

利用.contents()

从文档：

如果 iframe 与主页位于同一域中，则该.contents()方法还可用于获取 iframe 的内容文档。