Re: "Inheriting" internal and external style sheets from window.opener
Ivo
>
> 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/
RobG
[...]
> 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
Fred Oz
[...]
> 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
RobB
> 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
> > }
>
> 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
>
>
> 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]
RobG
[...]
> 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
[...]
>
> 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
[...]
> 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
Ivo
> 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/
relax...@optusnet.com.au
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
:)
Robert Mark Bram
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
:)
RobB
> 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[i] 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
Robert Mark Bram
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
> 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.
I do not think this grabs link elements though..
Rob
:)