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

R

relaxedrob

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
:)
 
I

Ivo

"(e-mail address removed)" 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
 
R

RobG

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.
 
R

RobG

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.
 
F

Fred Oz

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


I presume you really mean:

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

otherwise weirdness may result.
 
I

Ivo

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.
 
R

RobB

RobG said:
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...
 
R

RobG

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.
 
R

RobG

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
 
R

Robert Mark Bram

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
:)
 
R

RobB

RobG said:
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
 
R

Robert Mark Bram

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
:)
 
R

Robert Mark Bram

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
:)
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top