javascript - 如何处理嵌入式文档中的 DOM 事件？

Question

我在另一个页面中嵌入了一个 HTML 页面。现在我想通过单击嵌入文档中的链接使父文档中的 div 可见。我知道如何使 div 可见(我使用的是 jQuery)，但如何检查是否有人单击了嵌入文档中的链接？

我有这样的情况:

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> 

在 box.html 中

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

所以我需要通过单击 box.html 中的 div id=product1 在 index.html 中打开一个 div。

Answer 1

独立浏览器窗口之间的交互与文档与其嵌入文档之间的交互完全不同。因此 my original answer不会有太大帮助。我已经在下面更新了我的答案以适用于您的情况。我还更新了您的问题标题，以更好地反射(reflect)您正在尝试做的事情。

以下技术将用于在嵌入式文档中绑定(bind)点击事件:

从嵌入文档绑定(bind)，并用top.document引用父文档:

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

或者，从父文档绑定(bind)，并使用 document.foo.contentDocument 引用嵌入文档:

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

但是... 这是一条快乐的道路，并且适用于现代浏览器。遗憾的是，为了支持 IE8 和 IE7，我们有一些困难需要解决:

1. 第二种技术在 IE7 中不起作用，因为它不支持 contentDocument。
2. 第一种技术在 IE8 和 IE7 中不起作用，因为嵌入文档认为它是顶层窗口。即，window.top === window。

要解决问题 1，还算不错。如果 document.foo.contentDocument 不存在，我们使用 document.foo.parentWindow.document:

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

要解决问题 2，我们需要向父文档添加一些代码以告知嵌入文档有关父窗口的信息。

boxDoc.parentWindow.parentDocument = document;

但是... Chrome 和 FireFox 不支持 parentWindow。要获取文档的窗口，您必须使用defaultView，而IE7 不支持defaultView。所以，我们的代码变成了:

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

然后，我们必须在嵌入文档中引用parentDocument:

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

这是一个 working cross-browser demo使用这两种技术。