Search code examples
javascriptdominternet-explorer-10window.opener

DOM tree limitations in window.opener in IE10 using javascript?

Okay, so I downloaded IE10 and immediately ran into some issues already...

Imagine the following situation. We have a parental window, containing HTML:

<!DOCTYPE html>
<html>
    <head>
        <script>
            function doAction()
            {
                var win = window.open('child.htm', '', '');
            }
        </script>
    </head>
    <body>
        <a href="#" onclick="doAction();">Click here to open window</a>
        <div id="obj"><span>A new element should appear: </span></div>
    </body>
</html>

If you click on the link, then it will open a window containing HTML:

<!DOCTYPE html>
<html>
    <head>
        <script>
        window.onload = function()
        {
            var span = document.createElement('span');
            span.innerHTML = 'it works!';
            try
            {
                window.opener.document.getElementById('obj').appendChild(span);
            }
            catch(e)
            {
                alert('Exception was thrown: ' + e);
            }
        };
        </script>
    </head>
    <body>
    </body>
</html>

I have tested this in a lot of browsers (FF, Chrome, IE etc). The text 'it works' appears, like it should. Except for IE10, in which it gives an alert:

'Exception was thrown: HierarchyRequestError'

My question is, what is the best way to solve this?

I could of course pass the child to a function in the window.opener, but this does not work either. It seems as if I can only add a child to a window in which it is created. Correct?

I would also like to know why this has changed, it is hard to find anything about this exception.

Solution

  • What is going on?

    There do appear to be additional security measures put in place for Internet Explorer 10. As for the DOMException.HIERARCHY_REQUEST_ERR error, this has to do with attempting to put an object someplace the browser feels it doesn't belong. For instance, the following code will also raise this exception:

    document.appendChild( document.createElement( "form" ) );

    In this case, we cannot append a form to the document, hence the error. In your particular case, there appears to be a concern with adding objects generated in one window to another window.

    The DOM Exception Error Codes reference describes this error as:

    The node cannot be inserted at the requested location. Starting with Internet Explorer 10, the error-code string HierarchyRequestError is returned instead.

    How do you get around it?

    You have actually identified the appropriate modification to make; create elements from the context of the parent window. To avoid verbose lines of code, you could create a reference to the parent document and that throughout your code:

    var _doc = window.opener.document;

function addSpan () {
    _doc.body.appendChild( _doc.createElement("span") );
}

    This keeps the code from growing out of control with instances of window.opener.document.