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

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

Domanda

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.

È stato utile?

Soluzione

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.

Altri suggerimenti

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.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top