How to link CSS(s) already linked to parent frame into child iframeusing javascript

P

prabhjot singh

Hey there,

I've a particular requirement in which I need to link stylesheets
already included in a parent html. In that HTML file, another iframe
is being on the fly and I need to link same stylesheets into the child
iframe. I can't link those stylesheets individually into the child
iframe because in the parent frame it is being included using an HTMLF
file (using java include directive).

I don't want to hardcode names of the individual stylesheets (as I'm
currently doing) in the child frame,

So, the options are

1.) Dynamically check the stylesheets linked to the parent frame and
link them to child frame

OR

2.) Need a way to include an HTMLF file using javascript.
 
R

rf

prabhjot singh said:
Hey there,

I've a particular requirement in which I need to link stylesheets
already included in a parent html. In that HTML file, another iframe
is being on the fly and I need to link same stylesheets into the child
iframe. I can't link those stylesheets individually into the child
iframe because in the parent frame it is being included using an HTMLF
file (using java include directive).

I don't want to hardcode names of the individual stylesheets (as I'm
currently doing) in the child frame,

So, the options are

1.) Dynamically check the stylesheets linked to the parent frame and
link them to child frame

OR

2.) Need a way to include an HTMLF file using javascript.

which is sometimes disabled. And then your "page" will be totally stuffed
up.

Include the CSS in each page referenced by an iframe, server side.
 
P

prabhjot singh

which is sometimes disabled. And then your "page" will be totally stuffed
up.

Include the CSS in each page referenced by an iframe, server side.

For this case, you can assume that javascript will always be enabled.
I can't use server side include as the child iframe is being built on
the fly using a javascript function.
 
S

Scott Sauyet

For this case, you can assume that javascript will always be enabled.
I can't use server side include as the child iframe is being built on
the fly using a javascript function.

You can start with the document.styleSheets array in the parent
frame. But this is more difficult than you might like, because of
even greater than usual inconsistencies between browsers. Or perhaps
you can just list all the LINK elements with type="stylesheet" and all
the STYLE elements, copying them to the child frame. This certainly
sounds doable.

-- Scott
 
P

prabhjot singh

You can start with the document.styleSheets array in the parent
frame.  But this is more difficult than you might like, because of
even greater than usual inconsistencies between browsers.  Or perhaps
you can just list all the LINK elements with type="stylesheet" and all
the STYLE elements, copying them to the child frame.  This certainly
sounds doable.

  -- Scott

I need to bother about IE7 onwards only. Ok, I'll try copying the LINK
elements having type stylesheets into the child iframe, to see if it
helps.

Thanks for your help.
 
T

Thomas 'PointedEars' Lahn

Scott said:
You can start with the document.styleSheets array in the parent
frame.

It is _not_ an array, but a StyleSheetList implementation (more or less).

<http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-
StyleSheet-DocumentStyle>
But this is more difficult than you might like, because of
even greater than usual inconsistencies between browsers.

The only known inconsistency is that MSHTML provides the `rules' property
instead of the standards-compliant `cssRules' property, which can be easily
feature-tested for.

<http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet>
Or perhaps you can just list all the LINK elements with type="stylesheet"
and all the STYLE elements, copying them to the child frame. This
certainly sounds doable.

It would additionally require calling an elements matcher capable of
recognizing the "stylesheet" word in the attribute value, though.


PointedEars
 
S

Scott Sauyet

Scott Sauyet wrote:

The only known inconsistency is that MSHTML provides the `rules' property
instead of the standards-compliant `cssRules' property, which can be easily
feature-tested for.

I was assuming that the OP would then go on to use the rules in the
style sheet, and then run into the addRule/insertRule differences as
well, especially the bit about IE's version taking separate strings
for the selector and the style, whereas FF and others put them into a
single string. Or that the OP might run into some of the oddities of
cssText.

It would additionally require calling an elements matcher capable of
recognizing the "stylesheet" word in the attribute value, though.

Well yes, that seems obvious, or are you talking also about "alternate
stylesheet" and such?

-- Scott
 
T

Thomas 'PointedEars' Lahn

Scott said:
I was assuming that the OP would then go on to use the rules in the
style sheet, and then run into the addRule/insertRule differences as
well, especially the bit about IE's version taking separate strings
for the selector and the style, whereas FF and others put them into
a single string. Or that the OP might run into some of the oddities
of cssText.

What are you talking about? One iterates over the `styleSheets' list and
where there is a non-empty `href' property value one adds the corresponding
LINK element to the target document, perhaps adapting the path.
Well yes, that seems obvious, or are you talking also about "alternate
stylesheet" and such?

Exactly.


PointedEars
 
S

Scott Sauyet

What are you talking about?  One iterates over the `styleSheets' list and
where there is a non-empty `href' property value one adds the corresponding
LINK element to the target document, perhaps adapting the path.

This was what I was suggesting by using the LINK elements in the
original document.

The technique mentioned above accounts for STYLE elements as well. I
don't know if they are necessary to the OP, but that's why I gave at
least an option for it, saying that it's fairly tricky to use.

-- Scott
 
T

Thomas 'PointedEars' Lahn

Scott said:
This was what I was suggesting by using the LINK elements in the
original document.

The technique mentioned above accounts for STYLE elements as well.

True. This would allow for considering @import-ed stylesheets as well.
I don't know if they are necessary to the OP, but that's why I gave at
least an option for it, saying that it's fairly tricky to use.

But you are wrong. It is not always necessary to iterate over rules.

Anyhow, you will, hopefully, agree that it is generally more efficient to
filter an existing list of objects than one that needs to be created first,
especially when at least one method call and word matching is involved with
the latter.


PointedEars
 
S

Scott Sauyet

Scott Sauyet wrote:

But you are wrong.  It is not always necessary to iterate over rules.

No, not always. But when it is necessary, the code is still rather
ugly. This is all I was saying.

Anyhow, you will, hopefully, agree that it is generally more efficient to
filter an existing list of objects than one that needs to be created first,
especially when at least one method call and word matching is involved with
the latter.

Absolutely. However, run-time efficiency is not always high on my
priority list. I usually only bother looking for this sort of
optimizations if I've profiled some slow code and found the sections
causing the bottlenecks.

To help the OP, would the following be a reasonable algorithm?:

iterate over document.styleSheets, and for each sheet:
if the sheet has href, create a LINK element with that href
otherwise, create a STYLE element with contents copied from
the sheet?

I think there might be additional complexities if any of the sheets
have imports, as the algorithm would probably need to be recursive,
but the OP may not need to deal with that.

-- Scott
 
T

Thomas 'PointedEars' Lahn

Scott said:
No, not always. But when it is necessary, the code is still rather
ugly. This is all I was saying.

Reviewing this, in this case it is not even necessary if you want to
consider @import rules.
Absolutely. However, run-time efficiency is not always high on my
priority list. I usually only bother looking for this sort of
optimizations if I've profiled some slow code and found the sections
causing the bottlenecks.

Apply KISS then. A list of stylesheets is available, why reinvent the
wheel?
To help the OP, would the following be a reasonable algorithm?:

iterate over document.styleSheets, and for each sheet:
if the sheet has href, create a LINK element with that href
otherwise, create a STYLE element with contents copied from
the sheet?

Roughly, yes.


PointedEars
 
S

Scott Sauyet

Apply KISS then.  A list of stylesheets is available, why reinvent the
wheel?

Yes, if this works to get everything the OP needs and is as simple as
you imply, it's clearly the best bet.

Roughly, yes.

I'm probably missing something obvious, but I don't know of a simple
cross-browser technique to copy the content of one stylesheet into a
new STYLE element. Obviously in IE, we can just copy in
styleSheet.cssText. But I don't think the other browsers support
cssText on the whole sheet, just on the individual rules. Is there
some simpler method to do this?

-- Scott
 
T

Thomas 'PointedEars' Lahn

Scott said:
I'm probably missing something obvious, but I don't know of a simple
cross-browser technique to copy the content of one stylesheet into a
new STYLE element. Obviously in IE, we can just copy in
styleSheet.cssText. But I don't think the other browsers support
cssText on the whole sheet, just on the individual rules. Is there
some simpler method to do this?

Suppose !styleSheet.href and you are right about `cssText', in a nutshell:

var
s1 = styleSheet,
s2 = document.createElement("style");

if (s1 && s2)
{
s2.type = "text/css";
s2.appendChild(
s2.createTextNode(s1.cssText || s1.ownerNode.textContent));

document.getElementsByTagName("head")[0].appendChild(s2);
}

The `ownerNode' attribute/property is provided by the StyleSheet interface
of W3C DOM Level 2 Style Sheets (and implemented at least by Geckos);
MSHTML has `owningElement.innerText' instead, but, as you say, `cssText'
appears to suffice.

<http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-
StyleSheet>
<http://msdn.microsoft.com/en-us/library/ms534316(VS.85).aspx>
<http://msdn.microsoft.com/en-us/library/ms533698(VS.85).aspx>


PointedEars
 
S

Scott Sauyet

Scott Sauyet wrote:
I'm probably missing something obvious, but I don't know of a simple
cross-browser technique to copy the content of one stylesheet into a
new STYLE element.  Obviously in IE, we can just copy in
styleSheet.cssText.  But I don't think the other browsers support
cssText on the whole sheet, just on the individual rules.  Is there
some simpler method to do this?

Suppose !styleSheet.href and you are right about `cssText', in a nutshell:

  var
    s1 = styleSheet,
    s2 = document.createElement("style");

  if (s1 && s2)
  {
    s2.type = "text/css";
    s2.appendChild(
      s2.createTextNode(s1.cssText || s1.ownerNode.textContent));

    document.getElementsByTagName("head")[0].appendChild(s2);
  }

Ahh, very nice. I hadn't run across ownerNode before. This is
clearly the simplest solution.

Thank you for taking the time to post it.

-- Scott
 
T

Thomas 'PointedEars' Lahn

Should be document.createTextNode(...), of course.
document.getElementsByTagName("head")[0].appendChild(s2);
}

Ahh, very nice. I hadn't run across ownerNode before. This is
clearly the simplest solution.

Thank you for taking the time to post it.

You are welcome.


PointedEars
 
J

Jorge

(...)
s2.createTextNode(s1.cssText || s1.ownerNode.textContent));
(...)

"ownerNode of type Node, readonly (...) For style sheets that are
included by other style sheets, the value of this attribute is null."

"parentStyleSheet of type StyleSheet, readonly
For style sheet languages that support the concept of style sheet
inclusion, this attribute represents the including style sheet, if one
exists.(...)"

Therefore, me thinks:

IZ s1.ownerNode ?
YARLY
s1.ownerNode.textContent
NOWAI
s1.parentStyleSheet.ownerNode.textContent
KTHX
 
T

Thomas 'PointedEars' Lahn

Jorge said:
"ownerNode of type Node, readonly (...) For style sheets that are
included by other style sheets, the value of this attribute is null."

"parentStyleSheet of type StyleSheet, readonly
For style sheet languages that support the concept of style sheet
inclusion, this attribute represents the including style sheet, if one
exists.(...)"

Therefore, me thinks:

IZ s1.ownerNode ?
YARLY
s1.ownerNode.textContent
NOWAI
s1.parentStyleSheet.ownerNode.textContent
KTHX

Think again.


PointedEars
 
J

Jorge

(...)
  NOWAI
    s1.parentStyleSheet.ownerNode.textContent
KTHX

Hmm, that would be the parent styleSheet not the child, therefore...

NOWAY
BTW WAZZUP ?
KTHX

Copy rule by rule ?
 
T

Thomas 'PointedEars' Lahn

Jorge said:
Hmm, that would be the parent styleSheet not the child, therefore...

NOWAY
BTW WAZZUP ?
KTHX

Copy rule by rule ?

I have a fair idea now why you are continually running into walls.


PointedEars
 

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,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top