CODEWITHSUNDEEP
javascripthtmldomiframe
Motti
Motti

Reputation: 114765

Is there a limitation on an IFRAME containing another IFRAME with the same URL?

In order to play around a bit with frame hierarchy I wrote a small html page which allows nesting an arbitrary number of frames (code available at the end of the question).

However this doesn't work, on IE9 and Firefox 4 the inner frames are created but aren't rendered (the head and body are empty):

frames screenshot

and on Chrome it works for two levels and then if I click the Add button on the inner frame nothing happens (no error message in the console either).

If I copy the file N times and have each file use a different file it works for any depth (but not if there's a cycle).

I tried to search for such a limitation but I must not have used the right keywords. Does anyone have any reference for this?

Here's the addRemoveFrames.html file:

<!DOCTYPE html>
    <html>
    <head>
        <title>Add and Remove Frames</title>
        <script type="text/javascript">
            function add() {
                var f = document.createElement('iframe');
                f.src = 'addRemoveFrames.html';
                document.getElementById('frameContainer').appendChild(f);
            }
            function remove() {
                var c = document.getElementById('frameContainer');
                var f = c.lastChild;
                if (f)
                    c.removeChild(f);
            }
        </script>
    </head>
        <body>
            <input type="button" onclick="add()" value="Add"/>
            <input type="button" onclick="remove()" value="Remove"/>
            <hr />
            <div id="frameContainer"></div>

        </body>
    </html>

I've modified @davin's answer slightly so each frame's URL reflects its full path in the hierarchy.

var counter = 0;
function add() {
    var f = document.createElement('iframe');
    var sep = location.search ? (location.search + '.') : "?";
    f.src = 'addRemoveFrames.html' + sep + ++counter;
    document.getElementById('frameContainer').appendChild(f);
}

Upvotes: 19

Views: 10444

Answers (3)

CodingKiwi
CodingKiwi

Reputation: 776

chrome I tested it with chrome, the maximum image nesting is 4. inside the second "asd" (red one) is an iframe, but the is empty

If i include a third page, the nesting increases

enter image description here

Conclusion: depends in the url, if you have an unlimited amount of nested UNIQUE urls, you can nest indefinitely

Upvotes: 2

BoffinBrain
BoffinBrain

Reputation: 6525

Here is an official reference: Implementing HTML Frames - W3C Working Draft 31-Mar-97. The heading is 'Infinite Recursion' and states that if the src is equal to the parent URL, it should be treated as empty.

I would recommend the technique davin uses, or use pure DOM to create nested elements instead of IFRAMEs, which would make programmatic changes easier and potentially use less memory, as well as avoiding that issue with delayed loading.

Upvotes: 10

davin
davin

Reputation: 45555

Looks like a sensible browser security mechanism to prevent an infinite loop of nested iframes (even though in your case it wouldn't be infinite).

In any case, a simple workaround could be to add a useless query parameter to the url, making the browser think the page loaded isn't identical, but really it is.

So instead of your current function add(), something like this (I went all out so id doesn't polute the global namespace):

var add = (function(){

  var id = 0;
  return function(){
     var f = document.createElement('iframe');
     f.src = 'addRemoveFrames.html?useless=' + id++;
     document.getElementById('frameContainer').appendChild(f);
  };

})();

Upvotes: 15

Related Questions