How does target="framename" work when iframe DOM has changed

Question

I know iframes are evil, but mine is legacy app n I need to use iframes in it. So...

I need to create n display tabs of iframes dynamically for my web app. All frame sources are intra-domain so full traversal n access within the frames possible.

The problem with iframes n the DOM is that these iframes register as window.frames.framename, so I will have an array of those objects in the "frames" object.

My requirement states that the "active" frame must have the name "form". So I change that iframe attribute when setting that frame as active. But this doesn't reflect in the DOM as window.frames.form, so I change that too manually by setting the current frame object like this: frames.form = my_frame.content Window

All this works fine n I'm able to now access everything in n out of the active "form" iframe properly.

The problem now is with my links in the main page that have target="form". The target is not being recognized as the latest set (active) iframe with the name "form", n hence that link when clicked opens up in a new window/tab in the browser. This behavior is in all browsers except firefox. (Firefox does the required thing: open those links in the latest form iframe)

I suppose I don't have the knowledge of how the browser manipulates such changes in the DOM related to iframes. So any help would be appreciated. Thanks!

UPDATE: Here's a simplified code (note: not original code): http://jsfiddle.net/u4VJL/5/

 function AddNewTab(e) {
     $('#list').attr('id', 'nolist').attr('name', 'nolist');
     $('#form').attr('id', 'noform').attr('name', 'noform');

     $(document.body).append('<iframe id="list" name="list" src="" marginwidth="0" marginheight="0" scrolling="auto" frameborder="1" class="form" style="width:22%"></iframe>');
     $(document.body).append('<iframe id="form" name="form" src="" marginwidth="0" marginheight="0" scrolling="auto" frameborder="1" class="form" style="width:74%"></iframe>');
     frames.list = $('#list')[0].contentWindow;
     frames.form = $('#form')[0].contentWindow;

     return false;
 }
 $('#addnew').click(AddNewTab);

Steps to reproduce the issue:

Click the "Add new tab" link once.
Click "Sample link" - and that href will load in the right frame named "form".
Click "Add new tab" again. A new set off iframes should show up.
Click "Sample link" again. The page should now load in the 2nd right frame, but it loads in first.
NOTE: Browsers with this issue (that I've tested in): Google Chrome, IE8. Firefox does not have this issue.

Hmm that should work... when you change another iframe to have name=frame are you sure you are taking the name off the prior one first? Can you post some code here or on fiddle? — Dave Stein
Yup I am. I am actually using Knockout.js here. So it takes care of it, definitely. I'll try to post a sample code in a while so that you can see what I'm talking about. Thanks! — Krishnan
Also, I was thinking before that Knockout could be the reason, but I'm sure now that it is not, because if the entire (iframe) element was supposed to be refreshed/created again n again whenever there is an "observable" change, it would've messed with my contents in the iframe, which does not happen. so.. anyway.. Sample code's on the way. — Krishnan
And just to be clear, your parent iframe is the one with the links and the target links pointing at form? — Dave Stein

Artem Gorlachev Artem Gorlachev · Accepted Answer · 2013-09-03T07:57:43

you need to use live:
$('#addnew').live("click", AddNewTab);

uhh, it was a wrong answer, i think you need to look this way:

$("a[target=form]").click( function(){
    $("#form").last().attr("src", $("a[target=form]").attr("href"));
    $("#form").reload();
    return false;
});

this works

How does target="framename" work when iframe DOM has changed

2 Answers