Question

1. Add a frame to the page
2. Remove it
3. Add another frame with the same name
4. window.frames["frame_name"] doesn’t work

HTML

<iframe id="replaceme" name="frame_1"></iframe><br />

JS

$("body").append(window.frames[0].name + "<br />");
$("body").append(window.frames["frame_1"].name + "<br />");
$("body").append( (window.frames[0] == window.frames["frame_1"]) + "<br />");

$("#replaceme").remove();

$("body").append('<iframe name="frame_1"></iframe><br />');

$("body").append(window.frames[0].name + "<br />");
$("body").append(window.frames["frame_1"].name + "<br />");
$("body").append( (window.frames[0] == window.frames["frame_1"]) + "<br />");

http://jsfiddle.net/xbmSs/

Is this a bug or expected behavior? It works fine in Opera, Safari, Chrome. Any suggestions of how to work around it in Firefox?

Answer 1

This is a bug, as you already figured out.

There are two options for workarounds, in addition to not reusing frame names:

1) You could delete window.frames["frame_name"] either when removing the relevant frame from the DOM or right before you access window.frames["frame_name"]. Either one should work in Firefox, but I can’t speak to other browsers.

2) You could switch to using document.getElementById("frame_id").contentWindow. The big problem there is IE compat, especially in older IE versions…