<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> 

我的內的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); 
} 

    }); 
}); 

我嘗試在 JavaScript來插入此代碼：

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

但是，它不會工作，因爲JavaScript代碼是內，它不能看到#show<div>。

有什麼方法可以使用JavaScript或jQuery，當我點擊中的#button時，它會反映出#show<div>？

Answer 1

試試這個

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

OR

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