Append CSS to child pop-up window from parent

Question

I'm trying to control the CSS properties of a pop-up window from the parent page, without wiping its content. As a link is clicked, a pop-up appears with a certain fixed content and style that are already present. So here's what I'm doing:

<script type="text/javascript">
    function popupcontrol(url) {
        control = window.open(url, 'RT', 'width=800,height=600,screenX=100,screenY=100,toolbar=0,resizable=0,scrollbars=1');
    ...
    }
</script>

I would like to append something like this:

$("head").append("<link rel='stylesheet' href='/css/newCss.css' type='text/css'>");

but how am I supposed to select the head of the pop-up page which is assigned to the above specified variable control ?

Answer 1

You need to use the returned window reference and then find subchildren of that.

$(control.document).find('head').append(
    "<link rel='stylesheet' href='/css/newCss.css' type='text/css'>"
);

relevant answer