让 iframe 监听与父级相同的事件并使用 jquery 进行同步

发布于 2024-12-03 09:01:18 字数 1478 浏览 0 评论 0原文

我在同一个域的 html 页面中有两个 iframe

<body>
  <table border="1" width="100%" height="100%">
    <tr>
      <th><iframe class="isiframe" width="100%" height="100%" src="/example"></iframe></th>
      <th><iframe class="isiframe" width="100%" height="100%" src="/example"></iframe></th>
    </tr>
  </table>
</body>

我已经为 iframe 内网页中的所有 a 标签提供了单击事件

$('a').bind('click', function(e){
      var path = $(this).getPath();
      var ahash={
                   'path':path
                };
      if (getFrameElement())
         window.parent.document.Aaddevent(e, ahash);
});

单击事件中的“路径”给出了单击的 a 标签的路径（例如 html > ; 正文 > div#bar > ul#abc.def.ghi > li#foo)。 getFrameElement() 返回被单击的框架。现在我想要做的是使用此路径并触发其他 iframe 中的单击事件，

我已经定义了 sendevent 函数，另一个 iframe 从中获取父 iframe 的事件并触发与父 iframe 相同的事件并同步。

document.sendevent=function(e, ahash){
    var iframes= parent.document.getElementsByTagName('iframe');
    for (var i= iframes.length; i--;) {
        var iframe= iframes[i];
        if(iframe){
                    $(ahash.path).trigger('click');
                  }
    }
};

这就是我想要做的并使 iframe 工作的方式，遵循父 iframe 单击元素的路径，然后触发单击事件，使其他 iframe 使用该路径与父 iframe 同步

单击事件不会在 sendevent 内触发函数，但当我在 sendevent 函数内执行 console.log(ahash .path) 时，我得到父 iframe 单击元素的路径。我怎样才能使这个方法起作用或类似的东西。请建议我一些解决方案如何做到这一点。

原文

I have two iframes in an html page in the same domain

<body>
  <table border="1" width="100%" height="100%">
    <tr>
      <th><iframe class="isiframe" width="100%" height="100%" src="/example"></iframe></th>
      <th><iframe class="isiframe" width="100%" height="100%" src="/example"></iframe></th>
    </tr>
  </table>
</body>

I have given the click event for all the a tag in the webpage inside the iframe

$('a').bind('click', function(e){
      var path = $(this).getPath();
      var ahash={
                   'path':path
                };
      if (getFrameElement())
         window.parent.document.Aaddevent(e, ahash);
});

The "path" in the click event gives the path of the clicked a tag (eg. html > body > div#bar > ul#abc.def.ghi > li#foo). The getFrameElement() returns the frame which is clicked. Now what i want to do is use this path and trigger the click event in other iframe

I have defined sendevent function from where the other iframe gets the event of the parent iframe and triggers the same event as parent and synchronize.

document.sendevent=function(e, ahash){
    var iframes= parent.document.getElementsByTagName('iframe');
    for (var i= iframes.length; i--;) {
        var iframe= iframes[i];
        if(iframe){
                    $(ahash.path).trigger('click');
                  }
    }
};

This is how i want to do and make the iframe work, follow the path of the parent iframe clicked element and then trigger the click event to make other iframe synchronize with the parent iframe using the path

The click event is not getting triggered inside the sendevent function but i am getting the path of the parent iframe clicked element when i do console.log(ahash .path) inside the sendevent function. How can i make this method work or something similar like that. Please suggest me some solution how to do this.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

药祭#氼 2024-12-10 09:01:18

您无法使用 $("a").trigger("click") 跟踪链接。您可以使用location.href = $("a").attr("href")。如果您只是尝试导航到两个框架中的相同 URL，则无需使用 .getPath()，只需传递 href 即可。在您的父页面中，使用它来绑定第一框架中的链接以导航第二框架：

$("iframe:first").contents().find("a[href]").click(function() {
    $("iframe:last", top.document)[0].contentWindow.location.href = this.href;
});

编辑： 在 IE 以及较新版本的 FireFox 和 Opera 中，您可以使用本机 DOM 方法 .click() 模拟链接上的实际点击。 Chrome 尚不支持它，但最终可能会支持。要使用 .getPath() 查找并单击链接，请在父页面中尝试以下操作：

$("iframe:first").load(function() {
    $(this).contents().find("a[href]").click(function() {
        $("iframe:last", top.document).contents().find($(this.getPath())[0].click();
    });
});

You cannot follow links using $("a").trigger("click"). You can use location.href = $("a").attr("href"). If you are simply trying to navigate to the same url in both frames don't bother with .getPath(), just pass the href. In your parent page, use this to bind the links in first frame to also navigate the second frame:

$("iframe:first").contents().find("a[href]").click(function() {
    $("iframe:last", top.document)[0].contentWindow.location.href = this.href;
});

Edit: In IE and newer versions of FireFox and Opera, you can use the native DOM method .click() to simulate an actual click on the link. Chrome doesn't support it yet, but probably will eventually. To use .getPath() in order to find and click the link, try this in the parent page:

$("iframe:first").load(function() {
    $(this).contents().find("a[href]").click(function() {
        $("iframe:last", top.document).contents().find($(this.getPath())[0].click();
    });
});

回复收藏 0 原文

~没有更多了~