title: How does target="framename" work when iframe DOM has changed
body: <p>I know iframes are evil, but mine is legacy app n I need to use iframes in it. So...</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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</p>
  
  <p>All this works fine n I'm able to now access everything in n out of the active "form" iframe properly.</p>
  
  <p>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)</p>
  
  <p>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!</p>
  
  <p>UPDATE:
  Here's a simplified code (note: not original code): <a href="http://jsfiddle.net/u4VJL/5/" rel="nofollow">http://jsfiddle.net/u4VJL/5/</a></p>
  
  <pre><code> function AddNewTab(e) {
       $('#list').attr('id', 'nolist').attr('name', 'nolist');
       $('#form').attr('id', 'noform').attr('name', 'noform');
  
       $(document.body).append('&lt;iframe id="list" name="list" src="" marginwidth="0" marginheight="0" scrolling="auto" frameborder="1" class="form" style="width:22%"&gt;&lt;/iframe&gt;');
       $(document.body).append('&lt;iframe id="form" name="form" src="" marginwidth="0" marginheight="0" scrolling="auto" frameborder="1" class="form" style="width:74%"&gt;&lt;/iframe&gt;');
       frames.list = $('#list')[0].contentWindow;
       frames.form = $('#form')[0].contentWindow;
  
       return false;
   }
   $('#addnew').click(AddNewTab);
  </code></pre>
  
  <p>Steps to reproduce the issue:</p>
  
  <ul>
  <li>Click the "Add new tab" link once.</li>
  <li>Click "Sample link" - and that href will load in the right frame
  named "form".</li>
  <li>Click "Add new tab" again. A new set off iframes should show up.</li>
  <li>Click "Sample link" again. The page should now load in the 2nd right
  frame, but it loads in first.</li>
  <li>NOTE: Browsers with this issue (that I've tested in): Google Chrome,
  IE8. Firefox does not have this issue.</li>
  </ul>