如何在嵌入式文档中处理DOM事件

How to handle DOM events in an embedded document?

本文关键字：处理 DOM 事件 文档 嵌入式      更新时间：2023-09-26

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

独立浏览器窗口之间的交互与文档及其嵌入文档之间的交互截然不同。因此，我最初的回答不会有多大帮助。我在下面更新了我的答案，以适用于您的情况。我还更新了你的问题标题，以更好地反映你正在尝试做什么。

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

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

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

或者，从父文档绑定，并使用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();

下面是一个使用这两种技术的跨浏览器演示。

如果你在一个浏览器窗口中使用框架，并且页面有相同的来源（它们来自同一个域），那么你可以使用这样的东西：

$（window.top.frames['otherframe']）.find（"#someId"）.hide（）；

如果你有两个完全不同的浏览器窗口，那么你就不能这样做。你需要通过服务器做一些事情。

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

如果页面是<[i]frame>d，则可以直接访问其他页面的变量和函数。同样的情况也可能发生，当用js打开其中一个窗口时

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

如果这两个页面不是直接来自彼此的引用，则可以使用window.postMessage。

相关文章：