javascript - 从 iframe 页面事件更改父级的 css

Question

我homepage包含最初不可见的 middle_overlay div。此外，它包含“ iframe capture”页面上有单击按钮，在按钮的单击事件中我想让 middle_overlay div 可见，但是从另一个页面我可以更改如何更改 css？

HTML：

<div id="middle_overlay">
</div>

<div id="middle">
    <iframe id="middle_frame" src="capture.php" frameborder='0' border='0' style="border:0;" seamless>
    </iframe>
</div> 

jQuery ::

$(document).ready(function()
{
$('#Monthly_Report').click(function(){
alert('monthly report clicked');
$('#middle_overlay').css('display','block');                                

});



});

Answer 1

window.parent.$('#middle_overlay').css('display','block'); 

请注意，这仅在您的 iframe 和父页面来自同一个域时才有效。

Answer 2

您已经得到了答案，但您可以参考此https://stackoverflow.com/a/19423398/1642219，以更清楚地了解您的问题

Answer 3

您也可以尝试使用此 jquery 解决方案：

$("#middle_frame").contents().find('#Monthly_Report').click(function(e){
    e.preventDefault();
    $('#middle_overlay').show();
});