单击 iframe 中的按钮 > 在父窗口中隐藏 div

Posted 2023-05-09

【中文标题】单击 iframe 中的按钮 > 在父窗口中隐藏 div

【英文标题】：clicking button within iframe > hide div in parent window

【发布时间】：2014-03-23 07:04:45

【问题描述】：

我在 iframe（与引荐来源网址相同的域）中的按钮上获取点击事件并使其关闭（在本例中）父窗口中的 2 个 div 时遇到问题。

主页的示例 html：

<div class="wrapper">
    <iframe src="foo"></iframe>
</div>
<div class="bg"></div>

iframe 的示例 html：

<div class="btn_wrapper">
    <a href="http://www.foobar.com" class="yes">Yes</a>
    <a class="no">No</a>
</div>

JS：

// redirect
$('body').on('click', '.btn_wrapper .yes', function() 
    window.top.location = 'http://www.foobar.com';
);

// hide iframe popup wrapper and bg
$('body').on('click', '.btn_wrapper .no', function() 
    $('.wrapper').fadeOut(250, function() 
        $('.bg').fadeOut(150);
    );
);

$('body').on('click'... 函数确实运行成功，因为单击“是”按钮会重定向，在我的完整代码中，单击“否”以设置 cookie，它确实如此。

由于某种原因，它只是不隐藏包含 iframe 和背景覆盖的 .wrapper。我怎样才能做到这一点？

对于我正在构建的东西，我不必严格使用 iframe，但是为了与已有功能的一致性和集成，我真的很想继续使用 iframe。

【参考方案1】：

试试：

$('body').on('click', '.btn_wrapper .no', function() 
    $('.wrapper', window.parent.document).fadeOut(250, function() 
        $('.bg', window.parent.document).fadeOut(150);
    );
);

【讨论】：

这似乎对我有用 - 我最初遇到了一些不寻常的缓存问题，但现在一切都很好。谢谢！

@Novocaine88：很高兴它有帮助:)