DOM Exception: HIERARCHY_REQUEST_ERR (3) while appendTo function

Question

I am trying to create a popup in a window body as follows:

this.jNotifObj = $('<div class="notify-osd DialogInner"><div class="imgClose" onclick="$(this).parent().hide();"></div><div style="Float:left;max-width:50%;overflow:hidden;"><h2>' + this.opts.message + '&nbsp;</h2></div><div id=divAction1  style="Float:left;max-width:20%;padding-left:10px;overflow:hidden;"><h3>' + this.opts.actionTitle1 + '</h3></div><div id=divAction2  style="Float:left;max-width:20%;padding-left:10px;overflow:hidden;"><h3>' + this.opts.actionTitle2 + '</h3></div></div>').hide();

 $(this.jNotifObj).appendTo(this.parentWindow .document.body).fadeIn('fast', function () {
// codes here
// test code
});

I am getting an error as follows:

DOM Exception: HIERARCHY_REQUEST_ERR (3)

I have refer the previous questions about this error. But failed again... PLease help me for solving this issue. Thank you in advance.

Answer 1

This is kind of a complicated topic where i already put some research in. There are several errors in the IE resulting from the same issue and the error you have is one of them.

Even though the modern browsers differ in the implementation details they all agree to have security restrictions for access between windows in their current versions. Chrome is the only browser which currently allows accessing the parent window the way you do (if and only if both windows point to locations on the same domain).

I didn't find a source on the internet listing what is possible and what is not possible but from what i did i think what you can do is:

1. Pass objects to other windows by reference
2. Pass simple values (strings, ints etc..) to other windows by value

What you can't do:

1. Access and manipulate the DOM on other windows (i think that is part of your problem here)
2. Invoke functions on objects passed by reference (may also be part of your problem)

The solution for me (and possibly the only one that will be available in the future) is postMessage().

Please see for an example: http://javascript.info/tutorial/cross-window-messaging-with-postmessage

This system allows you to communicate between browser windows in a safe way. I tried a lot of things with it and the bottom line is basically that you can transfer anything that you can convert to JSON. And on the other hand it means if you can't convert it to JSON you can't send it.

Please also note that you will always have to provide a target domain. If you don't care what targetDomain to use you'll have to provide '*'. If you don't provide anything messages will not be sent.

So for your case that means that you will have to send a message to the parentWindow which will be listening for that message. When it receives that message it will execute whatever you want to achieve on its own.