<iframe> 按钮到主

Question

我有这样的代码：

iframe.html:

<div id="w">
<div id="a">
 ...
</div>
<div id="b" style="display:none">
 ...
</div>
</div>
<a href="#" id="button" class="b open">Change</a>

main.html:

...
<div id="con">
        <iframe src="http://localhost/iframe.html" scrolling="no" id="myiframe">
            <p>Your browser does not support iframes.</p>
        </iframe>
    </div>
<div id="show" style="display:none">
Hello WOrld!
</div>

<iframe>:中的我的JavaScript

$(document).ready(function() {
  $("a#button").click(function(){
    if ($(this).hasClass('open')) {
                $(this).removeClass('open');
                $(this).addClass('close');
                $('#a').fadeOut(200);
                $("#b").fadeIn(200);
 }else{
$("a#button").css({"margin-top":""});
                $(this).removeClass('close');
                $(this).addClass('open');
                $("#b").fadeOut(200);
                $('#a').fadeIn(200);
}
  });
});

我尝试在<iframe> JavaScript:中插入此代码

....
 $("a#button").click(function(){
    $("#show").css({"display":"block", "background":"green"});
....
}

但是，它不起作用，因为JavaScript代码在<iframe>内部，它看不到#show <div>。

有没有任何方法可以使用JavaScript或jQuery，当我单击<iframe>中的#button时，它会反映#show <div>？

Answer 1

尝试这个

 $("a#button").click(function(){
   $('#show', window.parent.document).css({"display":"block", "background":"green"});
   ... 
 }

或

parent.top.$("#show").css({"display":"block", "background":"green"});