如何使IFRAME监听父IFRAME的点击事件，并使用父IFRAME中被点击元素的路径

How to make IFRAME listen to click event of parent iframe and use the path of the clicked element in parent iframe

本文关键字：IFRAME 路径 元素 事件 何使 监听      更新时间：2023-09-26

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

<iframe id="i1" width="100%" height="100%" src="/wordpress"></iframe></th>
<iframe id="i2" width="100%" height="100%" src="/wordpress"></iframe></th>

我已经给出了点击事件的一个标签在iframe内，从那里我得到点击元素的路径在父iframe

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

我现在想使用这个路径并触发其他iframe中的click事件，以便两个iframe具有相同的页面视图。我使用第二个iframe从父iframe的点击事件的路径如下所示:

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

我现在面临的问题是，我正在获得在第二个iframe中触发的点击事件的警报，但它没有加载父iframe的路径并打开与父iframe相同的内容。

我不明白我在哪里做的错误。有可能按照我想要的方式去做吗?如果是这样，谁能告诉我为什么会发生这种情况，以及我需要做些什么，以便其他iframe从父iframe中的单击事件中使用父iframe的路径打开内容。

你正在做很多jQuery会自动为你做的循环和if。除非我遗漏了什么。请参阅我在每行上的注释:

var iframes= parent.document.getElementsByTagName('iframe');  // why not use jQuery?
for (var i= iframes.length; i--;) { // why not use jQuery here?
    var iframe= iframes[i]; 
    if($(iframe)) { // always true - even an empty jQuery object returns true
        // where does ahash come from? 
        if (ahash.path!=undefined) { // Why not do this check outside the loop?
            $(iframe).click(function(e) { 
                $(this).find(ahash.path).trigger('click'); // this will do nothing
                    // $(this).find() will be empty - your iframe has no children
                    // you want $(this).contents().find();
            }).click();                // why immediately call click and then unbind?
            $(iframe).unbind('click'); // why not just call the code?
        } // is this brace in the right spot?
    // missing brace
// missing brace

我会这样重写:

$("iframe", parent.document).contents().find(ahash.path).click();

分解，即:

$("iframe", parent.document) // get all of the iframes in the parent document
    .contents()              // get the content documents of those frames
    .find(ahash.path)        // find the elements matching the ahash.path in each
                             // of the frames' content documents
    .click();                // trigger a click on the matching elements in each frame

这就是你想要做的吗?如果是这样，那么我认为您的问题是您在调用.find()之前没有在iframe上调用.contents()。

Edit:请注意，您不能通过调用$("a#myLink").click()导航到url。你将不得不转而操作location.href。但是，在IE和更新版本的FireFox和Opera中，可以通过直接调用元素的原生DOM方法.click()来实现，如下所示:$("a#myLink")[0].click()。由于这是HTML5的一部分，你可能很快就可以在Chrome中这样做。

下面是一个演示，展示了jQuery的click()方法在链接上的行为:http://jsfiddle.net/gilly3/C48mv/1/

相关文章：