«

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[i].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

"" 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[i].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[i].href ) {
document.write( '<style type="text/css">'
+ window.opener.document.styleSheets[i].cssText
+ '</style>');
}else{
// write the link with the href as above
}

HTH
--
Ivo
http://www.vansandick.com/

Ivo wrote:
[...]
>
> One word: cssText
>
> Example of use:
> if( ! window.opener.document.styleSheets[i].href ) {
> document.write( '<style type="text/css">'
> + window.opener.document.styleSheets[i].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[i].cssRules[i].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 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')[i].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 wrote:
[...]
> window.opener.document.styleSheets[i].cssRules[i].cssText

I presume you really mean:

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

otherwise weirdness may result.

--
Fred

"RobG" wrote
> probably the simplest method is to use
> document.getElementsByTagName('style')[i].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/

RobG <> wrote in message news:<S%Nrd.943$>...
> Ivo wrote:
> [...]
> >
> > One word: cssText
> >
> > Example of use:
> > if( ! window.opener.document.styleSheets[i].href ) {
> > document.write( '<style type="text/css">'
> > + window.opener.document.styleSheets[i].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[i].cssRules[i].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...

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

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[i] has an href, and if so, write it out
b. If not, use innerHTML to get the text content


--
Rob

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[i].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