如何使IFRAME侦听父iframe的click事件并使用父iframe中clicked元素的路径

Question

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

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

I have given the click event for the a tag inside the iframe from where i am getting the path of the clicked element in the parent iframe

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

I now want to use this path and trigger the click event in other iframe so that both iframe have the same page view. I am using the path in second iframe from the click event of parent iframe in the following way:

    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');
                            }
                        }
                    }

The problem i am facing now is i am getting the alert for the click event getting triggered in the second iframe but it is not loading the path of the parent iframe and opening the same content as parent iframe.

I am not understanding where i am doing the mistake. Is it possible to do the way i am tring to make it happen? If so can anyone suggest me why this is happening and what i need to do so that the other iframe opens the content using the path of the parent iframe from the click event in the parent iframe.

Answer 1

You are doing a lot of looping and if-ing that jQuery will do for you automatically. Unless I am missing something. See my comments on each line:

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

I'd re-write it like this:

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

Broken down, that is:

$("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

Is that what you are trying to do? If so, then I believe your problem is that you are not calling .contents() on your iframe before calling .find() .

Edit: Note that you cannot navigate to a url by calling $("a#myLink").click() . You'll have to manipulate location.href instead. However, in IE and newer versions of FireFox and Opera you can do so by calling the element's native DOM method .click() directly like this: $("a#myLink")[0].click() . As this is part of HTML5, you'll probably be able to do so in Chrome shortly.

Here's a demo showing the behavior of jQuery's click() method on links: http://jsfiddle.net/gilly3/C48mv/1/