I have xthml page with an iframe that has src="dynamic-source" for a wysiwyg editor... ok not drupal... I'm trying to style the content inside the iframe from the page that contains the iframe. The browser sees the iframe as a separate frame therefore a separate page. As the iframe content is dynamic, I cannot include the css on the iframe's src page... There must be a way to apply css style to the iframe content from the page that contains the iframe... ANY hits would be awesome!! thanks :)

Comments

drupalninja99’s picture

Can it be done??

mcd’s picture

I was wondering about this myself for styling amazon product links. You can't do it with css alone, but apparently you can do it with javascript. See here:

http://thedesignspace.net/MT2archives/000115.html

Note that the javascript goes into the framed page, so you must have control over that page as well as the parent page.

drupalninja99’s picture

The way to go is to do a

, point it to a url that delivers javascript encoded html. It can be a dynamic page. So I made a php page that checks the user session var to see if the person is logged in and if so it shows login details, otherwise it shows a login block. I use a little php function that encodes a string in javascript so the last thing i do is encode my html and voila.

lenniegordo’s picture

This lets you insert css in to the iframe with out having to edit the iframe

function populateIframe() {
var ifrm = document.getElementById('myIframe');
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write('Hello World!');
ifrm.document.close();
}

http://www.tek-tips.com/viewthread.cfm?qid=1021687

my-family’s picture

Could you tell me please, where should I put the code? (I would like to add styles to Google CSE iframe). Thank you in advance.

siyaji’s picture

will someone tell me the more detailed process of java script that may be encoded to be used in programming

__________
Study English in UK

Christopher James Francis Rodgers’s picture

I notice that you posted your issue some time back.

Please be aware that you posted your topic
in the 'Deprecated' (no longer used) section of the forums.

That is likely why you never got any replies.

Please note that this "topic" had been "Deprecated"
and will not be seen by typical forum users.

The "Deprecated section of the Forums"
is not actively used and is intended as a library archive
collection of old posts.

The only notice it will get is via notifications
to your topic's 'followers'.

Please "Post new Forum topic" in one of the active forums.

In your case I recommend that you post in the forum
-- Post installation http://drupal.org/forum/22
##


All the best; intended.
-Chris (great-grandpa.com)
___
"The number one stated objective for Drupal is improving usability." ~Dries Buytaert *

umarfarukm’s picture

thats a facebook fan page... i need to overwrite styles from my css file. is it possible?

ericbroder’s picture

Unfortunately it seems to be very difficult to use css or javascript/jquery to manipulate items that are inside an embedded iframe from a different domain name. There are security issues when you have a webpage with an iframe and they come from two different domains.

Same origin policy: http://en.wikipedia.org/wiki/Same_origin_policy
Cross-site scripting (XSS): http://en.wikipedia.org/wiki/Cross-site_scripting

Sokol-dupe’s picture

You need to set css to your iframe. In xhtml it's like <link type="text/css" rel="stylesheet" href="http://yourdomain/style.css" /> in <head> tag. If it's possible then include css file to your iframe.