Question

I have an HTML page embedded inside another page. Now I would like to make visible a div in the parent document, by clicking on a link in the embedded document. I know how to make a div visible (I’m using jQuery), but how do I check if somebody clicked on a link in an embedded document?

I have a situation like this:

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"); 
  }); 

  $("#product1").click(function () { 
   $("#wProdBox1").show("slow"); 
   $("body").addClass("scroll"); 
  }); 
</script> 

And in box.html

<div id="product1">Text box</div>

So I need to open a div in index.html by clicking on div id=product1 in box.html.

Answer 1

Interaction between separate browser windows is quite different from interaction between a document and its embedded documents. As such my original answer won’t be much help. I’ve updated my answer below to apply to your situation. I’ve also updated your question title to better reflect what you are trying to do.

The following techniques will work to bind a click event in an embedded document:

Bind from the embedded document, and reference the parent document with top.document:

$(function () {
    $("#product1").click(function () {
        $("#wProdBox1", top.document).show("slow");
    });
});

Or, bind from the parent document, and reference the embedded document with document.foo.contentDocument:

$(window).load(function () {
    $(document.foo.contentDocument).ready(function () {
        $("#product1", document.foo.contentDocument).click(function () {
            $("#wProdBox1").show("slow");
        });
    });
});

But… That’s the happy path and works in modern browsers. Sadly, we have some difficulties to work out in order to support IE8 and IE7:

1. The second technique doesn’t work in IE7 because it doesn’t support contentDocument.
2. The first technique doesn’t work in IE8 and IE7 because the embedded document thinks it is the top window. Ie, window.top === window.

To fix issue 1, it’s not too bad. If document.foo.contentDocument doesn’t exist, we use document.foo.parentWindow.document:

var boxDoc = document.foo.contentDocument || document.foo.parentWindow.document;
$(boxDoc).ready(function ()
{
    $("#product1", boxDoc).click(function (e)
    {
        $("#wProdBox1").show("slow");
    });
});

To fix issue 2, We need to add some code to the parent document to tell the embedded document about the parent window.

boxDoc.parentWindow.parentDocument = document;

But… Chrome and FireFox don’t support parentWindow. To get the document’s window, you have to use defaultView, and IE7 doesn’t support defaultView. So, our code becomes:

var boxWin = boxDoc.defaultView || boxDoc.parentWindow;
boxWin.parentDocument = document;

Then, we have to reference parentDocument in the embedded document:

$("#wProdBox1", parentDocument).toggle();

Here’s a working cross-browser demo that uses both techniques.