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>，因此无法正常工作。

当我点击#button中的<iframe>表示它会反映#show <div>时，有没有办法使用JavaScript或jQuery？

Answer 1

试试这个

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

OR

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

主</iframe>的<iframe>按钮

1 个答案: