Notification to the parent window from child window in jQuery

Question

I have problem to release div in parent window. I need to do this: After clicking in box.html, which is opend from index.html , on div id=product1, in parent window (index.html) should be released div id=wProdBox1. How to show jquery/css to do that?

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

And this is box.html

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

Answer 1

如果您将box.html作为新窗口打开，并且想要更改index.html中的某些内容，则必须使用opener进行引用：

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

Answer 2

jQuery allows you to pass the window reference after the selector:

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

I like to simplify this by storing window.opener.document in a variable:

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

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