从jQuery中的子窗口通知父窗口

时间:2012-03-01 00:44:32

标签: javascript jquery html css

我在父窗口中释放div有问题。我需要这样做:点击box.html,这是从index.html开始,在div id = product1上,在父窗口(index.html)中应该释放div id = wProdBox1。如何显示jquery / css呢?

这是index.html

<div id="box1">Text</div> 

<div id="wBox1">
  <a href="#" class="hideLink">[X]</a>
  <object id="objPage" name="foo" type="text/html" data="box.html"></object>
</div> 

<div id="wProdBox1">
  <a href="#" class="hideLink">[X]</a>
  <object id="objPage2" name="foo" type="text/html" data="box1.html"></object>
</div>

<script type="text/javascript"> 
  $("#box1").click(function () { 
    $("#wBox1").show("slow"); 
    $("body").addClass("scroll"); 
  });
</script>

这是box.html

<div id="product1">Text box</div>
<script type="text/javascript">
  $("#product1").click(function () { 
   $("#wProdBox1").show("slow");  //HERE IS PROBLEM
  }); 
</script>

2 个答案:

答案 0 :(得分:0)

如果您打开box.html作为新窗口并希望在index.html中更改某些内容,则必须按opener引用它:

opener.$("#wProdBox1").show("slow");

答案 1 :(得分:0)

jQuery允许您在选择器后传递窗口引用:

$("#wProdBox1", window.opener.document).show("slow");

我喜欢通过将window.opener.document存储在变量中来简化此操作:

$( function() {
    var main = window.opener.document;

    $("#product1").click(function () { 
        $("#wProdBox1", main).show("slow");  //HERE IS FIX
    });
})