"Inheriting" internal and external style sheets from window.opener

Discussion in 'Javascript' started by relaxedrob@optushome.com.au, Dec 2, 2004.

  1. Guest

    Hi All!

    I have a page with with the following style information:

    <link rel="stylesheet" type="text/css" href="/eEmployment/eTech.css"
    />
    <style type="text/css">
    DIV.Application {
    BACKGROUND-IMAGE:url(/someImage.jpg);
    }
    </style>

    This page has a link that opens a popup that includes the following
    JavaScript:

    <script language="javascript">
    <%-- Script to grab the Portal Styles from the
    parent page and embed them in the popup --%>
    for (var i=0; i < window.opener.document.styleSheets.length-1; i++) {
    document.write("<link href='"
    + window.opener.document.styleSheets.href
    + "' rel='styleSheet' type='text/css'>");
    }
    </script>

    Unfortunately, this only manages to grab the external style sheet
    references and not the internal style sheets. Is there a way to have
    JavaScript write the internal style sheets as well?

    For reasons that are rather too complicated to explain, I am not able
    to directly link or include the style sheets in this popup, meaning
    that I can only get the style sheet information from the parent page..

    Any advice would be most welcome!

    Rob
    :)
    , Dec 2, 2004
    #1
    1. Advertising

  2. Ivo Guest

    "" asks
    >
    > I have a page with with the following style information:
    >
    > <link rel="stylesheet" type="text/css" href="/eEmployment/eTech.css"
    > />
    > <style type="text/css">
    > DIV.Application {
    > BACKGROUND-IMAGE:url(/someImage.jpg);
    > }
    > </style>
    >
    > This page has a link that opens a popup that includes the following
    > JavaScript:
    >
    > <script language="javascript">
    > <%-- Script to grab the Portal Styles from the
    > parent page and embed them in the popup --%>
    > for (var i=0; i < window.opener.document.styleSheets.length-1; i++) {
    > document.write("<link href='"
    > + window.opener.document.styleSheets.href
    > + "' rel='styleSheet' type='text/css'>");
    > }
    > </script>
    >
    > Unfortunately, this only manages to grab the external style sheet
    > references and not the internal style sheets. Is there a way to have
    > JavaScript write the internal style sheets as well?


    One word: cssText

    Example of use:
    if( ! window.opener.document.styleSheets.href ) {
    document.write( '<style type="text/css">'
    + window.opener.document.styleSheets.cssText
    + '</style>');
    }else{
    // write the link with the href as above
    }

    HTH
    --
    Ivo
    http://www.vansandick.com/
    Ivo, Dec 2, 2004
    #2
    1. Advertising

  3. RobG Guest

    Ivo wrote:
    [...]
    >
    > One word: cssText
    >
    > Example of use:
    > if( ! window.opener.document.styleSheets.href ) {
    > document.write( '<style type="text/css">'
    > + window.opener.document.styleSheets.cssText
    > + '</style>');
    > }else{
    > // write the link with the href as above
    > }


    This is an IE only solution. <object>.cssText is a Microsoft
    invention that happens to look like the equivalent DOM method:

    "There is no public standard that applies to this property."


    <URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/csstext.asp>

    The "proper" way to do it is (in this case):

    window.opener.document.styleSheets.cssRules.cssText

    <URLhttp://www.mozilla.org/docs/dom/domref/dom_style_ref3.html#998159>

    You need to iterate through the cssRules array to get the text and
    write each rule as you go.


    --
    Rob
    RobG, Dec 2, 2004
    #3
  4. RobG Guest

    RobG wrote:
    [...]
    > You need to iterate through the cssRules array to get the text and
    > write each rule as you go.


    Opps, forgot to add that probably the simplest method is to use
    document.getElementsByTagName('style').innerHTML, it will grab all
    the rules in one go ... but that is kinda hackish.

    Of course all the above assumes you add appropriate feature detection
    and handle cases where the attempted methods fail.

    --
    Rob
    RobG, Dec 3, 2004
    #4
  5. Fred Oz Guest

    RobG wrote:
    [...]
    > window.opener.document.styleSheets.cssRules.cssText


    I presume you really mean:

    window.opener.document.styleSheets.cssRules[j].cssText

    otherwise weirdness may result.

    --
    Fred
    Fred Oz, Dec 3, 2004
    #5
  6. Ivo Guest

    "RobG" wrote
    > probably the simplest method is to use
    > document.getElementsByTagName('style').innerHTML, it will grab all
    > the rules in one go ... but that is kinda hackish.


    Speaking of non-standard but nevertheless well supported kind of
    Microsoftish methods, you can reduce your code even further by simply
    reading and writing the outerHTML string.

    --
    Ivo
    http://www.vansandick.com/
    Ivo, Dec 3, 2004
    #6
  7. RobB Guest

    RobG <> wrote in message news:<S%Nrd.943$>...
    > Ivo wrote:
    > [...]
    > >
    > > One word: cssText
    > >
    > > Example of use:
    > > if( ! window.opener.document.styleSheets.href ) {
    > > document.write( '<style type="text/css">'
    > > + window.opener.document.styleSheets.cssText
    > > + '</style>');
    > > }else{

    > // write the link with the href as above
    > > }

    >
    > This is an IE only solution. <object>.cssText is a Microsoft
    > invention that happens to look like the equivalent DOM method:
    >
    > "There is no public standard that applies to this property."
    >
    >
    > <URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/csstext.asp>
    >
    > The "proper" way to do it is (in this case):
    >
    > window.opener.document.styleSheets.cssRules.cssText
    >
    > <URLhttp://www.mozilla.org/docs/dom/domref/dom_style_ref3.html#998159>
    >
    > You need to iterate through the cssRules array to get the text and
    > write each rule as you go.


    Mas o menos...

    <head>
    <title>untitled</title>
    <script type="text/javascript">
    //<![CDATA[

    if (
    opener &&
    !opener.closed &&
    typeof document.styleSheets != 'undefined')
    {
    document.writeln('<style type="text/css">');
    var nsheets = opener.document.styleSheets.length,
    SS, ruletype, rules, nrules, whichRule, str = '';
    for (var whichSS = 0; whichSS < nsheets; ++whichSS)
    {
    SS = opener.document.styleSheets.item(whichSS);
    ruletype = (typeof SS.rules != 'undefined') ? 'rules' : 'cssRules';
    if (typeof SS[ruletype] != 'undefined')
    {
    rules = SS[ruletype];
    nrules = rules.length;
    for (whichRule = 0; whichRule < nrules; ++whichRule)
    {
    rule = SS[ruletype].item(whichRule);
    document.writeln(rule.cssText);
    }
    }
    }
    document.writeln('</style>');
    }

    //]]>
    </script>
    </head>

    [adapted so, untested]

    Opera (all) doesn't support document.stylesheets coll, be aware...
    RobB, Dec 3, 2004
    #7
  8. RobG Guest

    Ivo wrote:
    [...]
    > Speaking of non-standard but nevertheless well supported kind of
    > Microsoftish methods, you can reduce your code even further by simply
    > reading and writing the outerHTML string.


    If you mean by "well supported" that it is supported by IE, sure. But
    neither Firefox nor Netscape support outerHTML. I suspect many other
    browsers don't support it either.

    However, it also appears that IE does not support the CSS 2 version of
    cssText as an attribute of the style object, so I guess both methods
    must be tried.

    --
    Rob
    RobG, Dec 3, 2004
    #8
  9. RobG Guest

    RobB wrote:
    [...]
    > Mas o menos...


    Which means "more or less"?

    [...]
    > Opera (all) doesn't support document.stylesheets coll, be aware...


    Given IE's proprietary version of cssText, the 'zilla's distaste for
    outerHTML and Opera's lack of a stylesheet collection, perhaps the
    simplest and most likely to work (and therefore "best"?) method is (if
    Opera supports innerHTML):

    1. Use getElementsByTagName to get all the style sheets
    2. a. Check if stylesheet has an href, and if so, write it out
    b. If not, use innerHTML to get the text content


    --
    Rob
    RobG, Dec 3, 2004
    #9
  10. Well, Ivo and Robg - there is some good code here!

    Technically we only support IE, so at a minimum I could use an IE only
    solution and use a test to block it from other browsers. Personally I would
    like to see a solution that can work for both.

    In the meantime, why might this solution not work? It is simple enough and I
    am sure IE supports the right DOM elements for it..

    if( ! window.opener.document.styleSheets[0].cssText ) {
    for (var i=0; i < window.opener.document.styleSheets.length-1; i++) {
    document.write( '<style type="text/css">'
    + window.opener.document.styleSheets.cssText
    + '</style>');
    alert ("This doc now has # style sheets: " +
    window.document.styleSheets.length);
    } // end for
    }

    Basically I never see the alert..

    Any advice is most appreciated!

    Rob
    :)
    Robert Mark Bram, Dec 3, 2004
    #10
  11. RobB Guest

    RobG wrote:

    > RobB wrote:
    > [...]
    > > Mas o menos...

    >
    > Which means "more or less"?


    More or less. :D

    >
    > [...]
    > > Opera (all) doesn't support document.stylesheets coll, be aware...

    >
    > Given IE's proprietary version of cssText, the 'zilla's distaste for
    > outerHTML and Opera's lack of a stylesheet collection, perhaps the
    > simplest and most likely to work (and therefore "best"?) method is (if
    > Opera supports innerHTML):
    >
    > 1. Use getElementsByTagName to get all the style sheets
    > 2. a. Check if stylesheet has an href, and if so, write it out
    > b. If not, use innerHTML to get the text content


    The inconsistency in the .cssText property is simple: W3C DOM exposes
    it as a property of the cssRule Object, and it returns the entire
    rule, selector and all, while in MSIE it belongs to the Style object
    and just holds the declarations. This appears to work:

    --------------------->

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>untitled</title>
    <link rel="stylesheet" href="simple.css" />
    <style type="text/css">

    ..foo { color: #f00; font-weight: 800; }
    span { letter-spacing: 1em; }
    #feh { font-size: 200%; }
    input { border: 9px white outset; padding: 6px; }

    </style>
    <script type="text/javascript">
    //<![CDATA[

    function go()
    {
    pop = window.open(
    'pop.html',
    'pop',
    'left=100,top=100,width=400,height=400,status');
    pop.focus();
    }

    //]]>
    </script>
    </head>
    <body>
    <form>
    <input id="feh" type="button" value="go" onclick="go()" />
    </form>
    </body>
    </html>

    [pop.html]

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>untitled</title>
    <script type="text/javascript">
    //<![CDATA[

    if (
    opener &&
    !opener.closed &&
    typeof document.styleSheets != 'undefined')
    {
    var i = 0,
    el,
    els = opener.document.getElementsByTagName('link');
    while (el = els.item(i++))
    if (el.getAttribute('rel') == 'stylesheet')
    document.writeln(
    '<link rel="stylesheet" href="' ,
    el.getAttribute('href') ,
    '" />'
    );
    document.writeln(
    '<style type="text/css">'
    );
    var nsheets = opener.document.styleSheets.length,
    SS, ruletype, rules, nrules, whichRule, str = '';
    var sel, dec;
    for (var whichSS = 0; whichSS < nsheets; ++whichSS)
    {
    SS = opener.document.styleSheets.item(whichSS);
    ruletype = (typeof SS.rules != 'undefined') ? 'rules' : 'cssRules';
    if (typeof SS[ruletype] != 'undefined')
    {
    rules = SS[ruletype];
    nrules = rules.length;
    for (whichRule = 0; whichRule < nrules; ++whichRule)
    {
    rule = SS[ruletype].item(whichRule);
    sel = rule.selectorText;
    dec = rule.style.cssText;
    document.writeln(
    sel ,
    '{' ,
    dec ,
    '}'
    );
    }
    }
    }
    document.writeln('</style>');
    }

    //]]>
    </script>
    </head>
    <body>
    <form>
    <input id="feh" type="button" value="go" onclick="go()" />
    </form>
    </body>
    </html>

    [simple.css]

    body {background: tan; margin: 100px;}

    --------------------->

    Didn't cover @-rules, easy enough to patch in. Posted this in case
    anyone was interested, as the OP thoughtfully ignored my earlier
    offering. Screw Opera, they had time to code document.all and
    outerText but couldn't bother to expose stylesheets properly...

    OK, I'm (semi-)kidding.

    RobB
    RobB, Dec 3, 2004
    #11
  12. Hi RobG,

    > <script type="text/javascript">
    > //<![CDATA[
    >
    > if (
    > opener &&
    > !opener.closed &&
    > typeof document.styleSheets != 'undefined')
    > {
    > var i = 0,
    > el,
    > els = opener.document.getElementsByTagName('link');
    > while (el = els.item(i++))
    > if (el.getAttribute('rel') == 'stylesheet')
    > document.writeln(
    > '<link rel="stylesheet" href="' ,
    > el.getAttribute('href') ,
    > '" />'
    > );
    > document.writeln(
    > '<style type="text/css">'
    > );
    > var nsheets = opener.document.styleSheets.length,
    > SS, ruletype, rules, nrules, whichRule, str = '';
    > var sel, dec;
    > for (var whichSS = 0; whichSS < nsheets; ++whichSS)
    > {
    > SS = opener.document.styleSheets.item(whichSS);
    > ruletype = (typeof SS.rules != 'undefined') ? 'rules' : 'cssRules';
    > if (typeof SS[ruletype] != 'undefined')
    > {
    > rules = SS[ruletype];
    > nrules = rules.length;
    > for (whichRule = 0; whichRule < nrules; ++whichRule)
    > {
    > rule = SS[ruletype].item(whichRule);
    > sel = rule.selectorText;
    > dec = rule.style.cssText;
    > document.writeln(
    > sel ,
    > '{' ,
    > dec ,
    > '}'
    > );
    > }
    > }
    > }
    > document.writeln('</style>');
    > }
    >
    > //]]>
    > </script>


    Very nice - and thank you!
    Worked in NS7.1, IE6.0 but not Opera 7.54 -- but my brief is only IE
    anyway.. :)

    Rob
    :)
    Robert Mark Bram, Dec 3, 2004
    #12
  13. Hello,

    > Opps, forgot to add that probably the simplest method is to use
    > document.getElementsByTagName('style').innerHTML, it will grab all
    > the rules in one go ... but that is kinda hackish.


    I do not think this grabs link elements though..

    Rob
    :)
    Robert Mark Bram, Dec 3, 2004
    #13
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kevin Spencer

    Re: Using external style sheets

    Kevin Spencer, Jul 9, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    355
    Kevin Spencer
    Jul 9, 2003
  2. Andrew Bewley via DotNetMonster.com

    window to window communication (window.opener)

    Andrew Bewley via DotNetMonster.com, Feb 3, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    1,028
    Andrew Bewley via DotNetMonster.com
    Feb 3, 2005
  3. Urs Gubler
    Replies:
    0
    Views:
    143
    Urs Gubler
    Jul 2, 2003
  4. Yaron C.

    opener.opener ?

    Yaron C., Oct 30, 2003, in forum: Javascript
    Replies:
    4
    Views:
    202
    Yaron C.
    Nov 2, 2003
  5. window.opener, form.opener?

    , Jul 14, 2006, in forum: Javascript
    Replies:
    5
    Views:
    272
Loading...

Share This Page