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

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

$（window.top.frames [ 'otherframe']）发现（ “＃someId”）隐藏（）;

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

Answer 2

由于同源政策，他们需要在同一个域中。

如果页面为<[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。

Answer 3

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

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

从嵌入文档中绑定，并使用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，我们遇到了一些困难：

第二种技术在IE7中不起作用，因为它不支持contentDocument。
第一种技术在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。

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

3 个答案: