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

StackOverflow https://stackoverflow.com/questions/15905159

Question

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.

Was it helpful?

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.

OTHER TIPS

My most simple solution at the moment is to replace:

var span = document.createElement('span');

with:

var span = window.opener.document.createElement('span');

But of course this leaves the last part of my answer still unanswered.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top