How to link CSS(s) already linked to parent frame into child iframe using javascript
in [JavaScript]
|
From: Scott Sauyet on 11 Jan 2010 11:07 On Jan 11, 10:43 am, Thomas 'PointedEars' Lahn <PointedE...(a)web.de> wrote: > Scott Sauyet wrote: >> 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. 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
From: Thomas 'PointedEars' Lahn on 11 Jan 2010 11:21 Scott Sauyet wrote: > Thomas 'PointedEars' Lahn wrote: >> Scott Sauyet wrote: >>> 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. > > 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. >> 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. 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 -- 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 11:44 On Jan 11, 11:21 am, Thomas 'PointedEars' Lahn <PointedE...(a)web.de> wrote: > Scott Sauyet wrote: >> Thomas 'PointedEars' Lahn wrote: >>> 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. > > 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. >> 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. 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
From: Thomas 'PointedEars' Lahn on 11 Jan 2010 12:32 Scott Sauyet wrote: > Thomas 'PointedEars' Lahn wrote: >> Scott Sauyet wrote: >>> 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. > > 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%28VS.85%29.aspx> <http://msdn.microsoft.com/en-us/library/ms533698%28VS.85%29.aspx> PointedEars -- Use any version of Microsoft Frontpage to create your site. (This won't prevent people from viewing your source, but no one will want to steal it.) -- from <http://www.vortex-webdesign.com/help/hidesource.htm> (404-comp.)
From: Scott Sauyet on 11 Jan 2010 12:39
On Jan 11, 12:32 pm, Thomas 'PointedEars' Lahn <PointedE...(a)web.de> wrote: > 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 |