By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,994 Members | 1,621 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,994 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
:)
Jul 23 '05 #1
Share this Question
Share on Google+
12 Replies


P: n/a
Ivo
"re********@optushome.com.au" 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/
Jul 23 '05 #2

P: n/a
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
Jul 23 '05 #3

P: n/a
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
Jul 23 '05 #4

P: n/a
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
Jul 23 '05 #5

P: n/a
Ivo
"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/
Jul 23 '05 #6

P: n/a
RobG <rg***@iinet.net.auau> wrote in message news:<S%*****************@news.optus.net.au>...
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...
Jul 23 '05 #7

P: n/a
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
Jul 23 '05 #8

P: n/a
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
Jul 23 '05 #9

P: n/a
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
:)
Jul 23 '05 #10

P: n/a
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[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
Jul 23 '05 #11

P: n/a
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
:)
Jul 23 '05 #12

P: n/a
Hello,
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
:)
Jul 23 '05 #13

This discussion thread is closed

Replies have been disabled for this discussion.