Javascript 如何处理嵌入文档中的DOM事件？

我在另一个页面中嵌入了一个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> 

文本
$（“#box1”）。单击（函数（）{
$（#wBox1”）.show（“slow”）；
$（“正文”）.addClass（“滚动”）；
}); 
$（“#product1”）。单击（函数（）{
$（“wProdBox1”）.show（“slow”）；
$（“正文”）.addClass（“滚动”）；
}); 

和在box.html中

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

文本框

---

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

如果您在一个浏览器窗口中使用框架，并且这些页面具有相同的来源（它们来自相同的域），那么您可以使用如下内容：

$（window.top.frames['otherframe']）。查找（“#someId”）.hide（）

---

如果有两个完全不同的浏览器窗口，则无法执行此操作。您需要通过服务器执行某些操作。

由于同源策略，它们需要位于同一域中

如果页面是

d，则可以直接访问其他页面的变量和函数。当其中一个窗口由js打开时，也可能出现同样的情况

var otherWindow = window.open(...);
otherWindow.onload = function() {
    otherWindow.showDivs(); // as declared in a script on the other page
    orDoSomethingWith(otherWindow.document);
};

---

如果这两个页面不是直接相互引用的，则可以使用

窗口。独立浏览器窗口之间的postMessage

交互与文档及其嵌入文档之间的交互完全不同。这样也帮不了什么忙。我在下面更新了我的答案，以适用于您的情况。我还更新了您的问题标题，以更好地反映您正在尝试做什么

以下技术将用于绑定嵌入文档中的单击事件：

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

从嵌入文档绑定，并使用

top.document

引用父文档：

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

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

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

或者，从父文档绑定，并使用

document.foo.contentDocument

引用嵌入的文档：

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

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

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

但是…这是一条快乐的道路，在现代浏览器中有效。遗憾的是，为了支持IE8和IE7，我们有一些困难需要解决：

第二种技术在IE7中不起作用，因为它不支持

contentDocument

第一种技术在IE8和IE7中不起作用，因为嵌入式文档认为它是顶部窗口。例如，

window.top==window

要解决问题1，还不算太糟。如果

document.foo.contentDocument

不存在，我们使用

document.foo.parentWindow.document

：

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

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

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();

---

下面是一个同时使用这两种技术的示例。

页面是如何关联的？它们是父/子框架还是兄弟框架？其中一个窗口是使用JavaScript打开另一个窗口的吗？因此现在应该更清楚了。我已经更新了下面的答案，以便更好地解决您的实际情况，现在我可以看到您的代码了。