如何在iframe中使用jQuery确定元素的祖先（例如，当我们检查元素以在Firebug中查看时，它会显示完整路径）

Question

I have two iframes in an html page

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

I have given the click event to change the href of second iframe when any link within first iframe is clicked so that both iframe have the same page loaded

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

The href is changed by the following method by accessing the id

document.sendevent=function(e, ahash){
   if (ahash.id!=undefined) {
      $('#i2', window.parent.document).contents().find('#'+ahash.id).trigger(e);
   } else {
      $('#i2', window.parent.document).attr('src', ahash.href);
   }
};

Now what i want to do is i have added "path" in the click event which shows the path of an elements ancestor when done console.log() but not in all cases as desired. I dont want to change the src by accessing the id as i am doing now because this is working fine to a certain point but after that when i want to access tab the href gets blank and i dont get the expected output (means the page view within second iframe does not change). Instead i want to use the full DOM path like given in the following link

http://davecardwell.co.uk/javascript/jquery/plugins/jquery-getpath/

I am unable to fetch the path and use it instead of accessing the iframe's id to change the src. How can i do that so that i can change the path of the second iframe when clicked any tab or link within first iframe

Answer 1

It sounds like you are having difficulty keeping your iframes in sync - when the URL changes in one, you want it to change the other to match. You might simplify things by just watching the onload event of the iframe and when it fires, change the location of the other frame to match:

$("#i1").load(function (e) {
    var url = this.contentWindow.location.href;
    var frameLoc = $("#i2")[0].contentWindow.location;
    if (frameLoc.href != url) {
        frameLoc.href = url;
    }
});