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.

Answer 1

frame name indeed. This works (in Firefox, Chrome, and IE8 n above):

    function AddNewTab(e) {
        $('#list').attr('id', 'nolist').attr('name', 'nolist');
        $('#form').attr('id', 'noform').attr('name', 'noform');
        if (frames.list) frames.list.name = 'nolist';
        if (frames.form) frames.form.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;

        frames.list.name = 'list';
        frames.form.name = 'form';

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

Working code here: http://jsfiddle.net/krislogy/u4VJL/8/

((PS: tchh!! I swear I had tried this but couldn't make it work before. Anyway, I guess I was wrong when I thought I tried it. Thanks all!!))

Answer 2

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