How to link CSS(s) already linked to parent frame into child iframe using javascript
in [JavaScript]
|
From: Scott Sauyet on 11 Jan 2010 15:47 On Jan 11, 12:32 pm, Thomas 'PointedEars' Lahn <PointedE...(a)web.de> wrote: > 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.createTextNode(s1.cssText || s1.ownerNode.textContent)); > > document.getElementsByTagName("head")[0].appendChild(s2); > } Another thought: if the iframe's src references a significantly different path than the main page and the stylesheet in a STYLE element contains relative URLS is there a simple way to deal with them? For example, main document at http://example.com/path/ iframe document at http://example.com/path/subpath/ <style type="text/css"> @import "../css/fancy.css"; body {background: url("../images/myPic.png");} </style> I'm wondering if the best answer is simply "Don't do that." Or is there a simple enhancement to this technique that would gracefully handle such a scenario? -- Scott -- Scott
From: Thomas 'PointedEars' Lahn on 11 Jan 2010 16:14 Scott Sauyet wrote: > Thomas 'PointedEars' Lahn wrote: >> 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.createTextNode(s1.cssText || > s1.ownerNode.textContent)); Yes, as I wrote in <news:9951811.dW097sEU6C(a)PointedEars.de>. >> document.getElementsByTagName("head")[0].appendChild(s2); >> } > > Another thought: if the iframe's src references a significantly > different path than the main page and the stylesheet in a STYLE > element contains relative URLS is there a simple way to deal with > them? > > For example, > > main document at http://example.com/path/ > iframe document at http://example.com/path/subpath/ > > <style type="text/css"> > @import "../css/fancy.css"; > body {background: url("../images/myPic.png");} > </style> > > I'm wondering if the best answer is simply "Don't do that." Yes, don't do that. To avoid confusion and path dependency, always refer relative to the document root (`/') in stylesheets. (IMHO, a local development server is a must anyway.) > Or is there a simple enhancement to this technique that would gracefully > handle such a scenario? Depends on what you call simple and what the scenario is (your example is unclear). It is certainly possible to compute the absolute path for a relative one. PointedEars -- Prototype.js was written by people who don't know javascript for people who don't know javascript. People who don't know javascript are not the best source of advice on designing systems that use javascript. -- Richard Cornford, cljs, <f806at$ail$1$8300dec7(a)news.demon.co.uk>
From: Jorge on 11 Jan 2010 16:21 On Jan 11, 8:34 pm, Thomas 'PointedEars' Lahn <PointedE...(a)web.de> wrote: > Jorge wrote: > > Jorge wrote: > >> (...) > >> 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 ? > > I have a fair idea now why you are continually running into walls. Ok. Here: http://jorgechamorro.com/cljs/091/ we've got 4 stylesheets: 1.- "a.css" in a <link> tag 2.- "b.css" imported from a rule @import in a.css 3.- into a <style> tag. 2.- "d.css" imported from a rule @import in the <style> stylesheet ..ownerNode.textContent is "" for #1 (document.styleSheets[0]), and neither b.css nor d.css are in the document.styleSheets collection... therefore you've got to walk the rules of the #1 stylesheet, or ... ¿ what else could you do instead ? TIA, -- Jorge.
From: Jorge on 12 Jan 2010 03:49 On Jan 11, 10:21 pm, Jorge <jo...(a)jorgechamorro.com> wrote: > On Jan 11, 8:34 pm, Thomas 'PointedEars' Lahn <PointedE...(a)web.de> > wrote: > > Jorge wrote: > > > Copy rule by rule ? > > > I have a fair idea now why you are continually running into walls. > > Ok. Here:http://jorgechamorro.com/cljs/091/ > we've got 4 stylesheets: > > 1.- "a.css" in a <link> tag > 2.- "b.css" imported from a rule @import in a.css > 3.- into a <style> tag. > 2.- "d.css" imported from a rule @import in the <style> stylesheet > > .ownerNode.textContent is "" for #1 (document.styleSheets[0]), and > neither b.css nor d.css are in the document.styleSheets collection... > therefore you've got to walk the rules of the #1 stylesheet, or ... > ¿ what else could you do instead ? Oops, I see: On Jan 11, 3:29 pm, Thomas 'PointedEars' Lahn <PointedE...(a)web.de> wrote: > (...) 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. IZ stylesheet.href ? YARLY BTW create <link> element and set href ~= stylesheet.href NOWAI BTW create <style> element and set .textContent = stylesheet.ownerNode.textContent KTHX Yes ? TIA, -- Jorge.
From: Thomas 'PointedEars' Lahn on 12 Jan 2010 06:51
Jorge wrote: > Oops, I see: > > On Jan 11, 3:29 pm, Thomas 'PointedEars' Lahn <PointedE...(a)web.de> > wrote: >> (...) 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. > > IZ stylesheet.href ? > YARLY > BTW create <link> element and set href ~= stylesheet.href > NOWAI > BTW create <style> element and set .textContent = > stylesheet.ownerNode.textContent > KTHX > > Yes ? <http://www.catb.org/~esr/faqs/smart-questions.html#writewell> 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.) |