Popups can be useful
One of the things to know is that most popup blockers will not allow opening popups unless function window.open if called during the processing of a user event (like a click). Basically, that means calling window.open during page load or using some non-user-initiated interaction will not work as the new window will be blocked.
You need to call window.open from an event initiated by the user, e.g. clicking on a link, and that link must have target=”_blank”. Otherwise, Chrome and Firefox will block the popup.
As we all know, Internet Explorer always comes with its little quirks and popups are no exception. IE doesn’t allow appending cross-window elements. In other words, if you create an element in a pop-up, you can’t append it to the opener’s document. Always create elements to append in the same document they’re going to be appended.
var popUp = window.open('about:blank'); popUp.document.body.appendChild(document.createElement('div'));
Avoid browser exceptions
The solution is quite simple. Instead of creating the DIV node using the current document’s context, you need to create it using the popUp’s context. The code will change a bit and look like this
var popUp = window.open('about:blank'); popUp.document.body.appendChild(popUp.document.createElement('div'));
Also, some browsers don’t add the boilerplate code to the DOM (<html>, <head>, <title>, <body>) so you need to make sure you have those elements before attempting to append child elements to them.
Summing it all up, this is how it would look the code to create popup append a child DIV element to it (when clicking on an element with ID ‘clicker’).
I told you popup can be very annoying, didn’t I?