force a stylesheet

  • lachlanmullen
  • Novice
  • Novice
  • lachlanmullen
  • Posts: 21

Post 3+ Months Ago

i want to load someone elses page onto my page using an iframe, but i want to be able to apply a stylesheet to their page once it's on my page. any ideas?

what i'm working on can be seen at http://www.sparkwash.com (notice the deep thoughts, that's what i'm trying to style)

thanks, team :D
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9090
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

I do not think you are going to be able to apply a stylesheet directly to that page if you are linking right to their site in your iframe. What you could do is write a script in PHP or Perl which loads the page internally on your server first, and then outputs exactly what it gets with the added CSS tags you want to style your page. You would then link right to your script in your iframe, instead of the other site. Not sure if it makes sense to you, but I gurantee that would work.

Another thing you could do is build your own database of Jack Handy Deep Thoughts and just have a script that randomly outputs quotes. You can find a script like that here:

PHP Quote Display
  • lachlanmullen
  • Novice
  • Novice
  • lachlanmullen
  • Posts: 21

Post 3+ Months Ago

i was afraid of that, unfortunately my server doesn't allow server side scripting from me.

i guess it's going to have to go.

i DO have a java script that dispays random quotes that works great, but adding all those quotes into it will make the page HUGE and slow to load.
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

lachlanmullen wrote:
i was afraid of that, unfortunately my server doesn't allow server side scripting from me.

i guess it's going to have to go.

i DO have a java script that dispays random quotes that works great, but adding all those quotes into it will make the page HUGE and slow to load.


I'd imagine the page you are loading in the iframe has the same huge array.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9090
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

b_heyer wrote:
lachlanmullen wrote:
i was afraid of that, unfortunately my server doesn't allow server side scripting from me.

i guess it's going to have to go.

i DO have a java script that dispays random quotes that works great, but adding all those quotes into it will make the page HUGE and slow to load.


I'd imagine the page you are loading in the iframe has the same huge array.


Yeah but I am sure its server based, not client based like JavaScript would be. If you used it in JavaScript first the client would have to download the huge array every time, and then it would have to execute on the clients machine. Not as good. Plus they could view the source of the page and get all of them at once.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

There is a solution. It is based in the heirarchy of the cascade:

Quote:
Multiple Styles Will Cascade Into One
Style Sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the <head> element of an HTML page, or in an external CSS file. Even multiple external Style Sheets can be referenced inside a single HTML document.

Cascading Order
What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" Style Sheet by the following rules, where number four has the highest priority:

1.Browser default
2.External Style Sheet
3.Internal Style Sheet (inside the <head> tag)
4.Inline Style (inside HTML element)
So, an inline style (inside an HTML element) has the highest priority, which means that it will override every style declared inside the <head> tag, in an external style sheet, and in a browser (a default value).

(quoted from w3schools - http://www.w3schools.com/css/css_intro.asp)

As you note in the above quote that Internal Style Sheets hold priority over external style sheets. It will take some work, but all you have to do is include all elements, classes, psuedo-classes and ID's that are in the original external style sheet and incorporate them into your own internal style sheet with the attributes you would prefer them to have.

Caution -- I didn't view the link of what you are trying to do, but be sure you have the original author's permission to do this if his/her work is copyrighted.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9090
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Yeah I still do not think this will work though. The page in the iframe is a seperate html page from the rest of the site. I do not think the CSS from his own personal site will apply no matter what. Whenever I load pages in iframes (which isn't often), I have to set the CSS in the page itself, or at least call the external CSS stylesheet from that page. I could be wrong, but I am fairly confident.
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

your right on bwm, but like you said if he loads the other page into an existing one with a stylesheet and server side code it will work fine.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

OK.. I see what he is doing (finally actually looked), and I see your points. Let me give that one some thoughts and experimenting. I still think it can be done, but it might take inline style
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Yep, Bigwebmaster and b_heyer...you guys are right...the style cascade just doesn't work in the externally called iframe. I tried every way I know of...
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

Out of curiosity, I tried every javascript technique that I could think of to access the dom of the iframe and manipulate the styles, but nothing worked. Then I found an article at microsoft and discovered that IE explicitly forbids using DHTML techniques across different windows and frames unless they are located at the same domain. This makes a lot of sense I think.

For most content, only interactions with content from the same domain are allowed. For example, a typical page on http://www.microsoft.com can freely script content on any other page on http://www.microsoft.com, but cannot script to pages that are located on a different Web domain. The DHTML Object Model uses the document.domain property to enforce this restriction: only pages with identical domain properties are allowed free interaction. The protocol of the URL must also match. For instance, an HTTP page cannot access HTTPS content.

So client-side scripting in the parent document is out too. The article is here
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Nice find RichB -- Thanks
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9090
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

That pretty much clears everything up RichB, thanks.
  • lachlanmullen
  • Novice
  • Novice
  • lachlanmullen
  • Posts: 21

Post 3+ Months Ago

once again, thanks guys. :D amazing how quickly and accurately solutions (or in this case confirmations) can be found here.

props!

lach
  • DKqwerty
  • Born
  • Born
  • DKqwerty
  • Posts: 1

Post 3+ Months Ago

Hey, sorry to bump this, but I have a useful solution in Firefox:

@-moz-document url-prefix(**domain of fetched iframe**)

This will apply your style sheet to the contents of the iframe.

Post Information

  • Total Posts in this topic: 15 posts
  • Users browsing this forum: No registered users and 55 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.