How to link CSS(s) already linked to parent frame into child iframe using javascript
in [JavaScript]
|
From: Thomas 'PointedEars' Lahn on 11 Jan 2010 08:31 Scott Sauyet wrote: > prabhjot singh wrote: >> "rf" <r...(a)z.invalid> wrote: >>> 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. > > 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> <http://msdn.microsoft.com/en-us/library/ms531199%28VS.85%29.aspx> > 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 -- Anyone who slaps a 'this page is best viewed with Browser X' label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network. -- Tim Berners-Lee
From: Scott Sauyet on 11 Jan 2010 08:59 On Jan 11, 8:31 am, Thomas 'PointedEars' Lahn <PointedE...(a)web.de> wrote: > Scott Sauyet wrote: >> 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. 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. >> 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. Well yes, that seems obvious, or are you talking also about "alternate stylesheet" and such? -- Scott
From: Thomas 'PointedEars' Lahn on 11 Jan 2010 09:29 Scott Sauyet wrote: > Thomas 'PointedEars' Lahn wrote: >> Scott Sauyet wrote: >>> 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. > > 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. >>> 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. > > Well yes, that seems obvious, or are you talking also about "alternate > stylesheet" and such? Exactly. PointedEars -- Danny Goodman's books are out of date and teach practices that are positively harmful for cross-browser scripting. -- Richard Cornford, cljs, <cife6q$253$1$8300dec7(a)news.demon.co.uk> (2004)
From: Scott Sauyet on 11 Jan 2010 10:30 On Jan 11, 9:29 am, Thomas 'PointedEars' Lahn <PointedE...(a)web.de> wrote: > Scott Sauyet wrote: >> Thomas 'PointedEars' Lahn wrote: >>> Scott Sauyet wrote: >>>> 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. > >> 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. 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
From: Thomas 'PointedEars' Lahn on 11 Jan 2010 10:43
Scott Sauyet wrote: > Thomas 'PointedEars' Lahn wrote: >> Scott Sauyet wrote: >>> Thomas 'PointedEars' Lahn wrote: >>>> Scott Sauyet wrote: >>>>> 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. >>> 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. > > 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 -- Anyone who slaps a 'this page is best viewed with Browser X' label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network. -- Tim Berners-Lee |