How do i apply CSS to the iFrame source page using jQuery?

Hi guys,

im using jQuery to load an external page into an iFrame and i'd like to know how to style that source page?

Note - ive discovered a jQuery plugin called frameReady here http://ideamill.synaptrixgroup.com/?page_id=18 which is supposedly good for loading in jQuery into external frames and even apply CSS but i couldnt get that working either...

Thanks in advance!
$(document).ready(function () {
	
    $("a").click(
		function(event){ 
			// Get link ref
			var href = $(this).attr("href");
			// DEBUG
			//alert(href);
			// Load link ref into iFrame
			$("iframe#form").attr({src: href});
			
			// Apply styles to loaded source
			//$.frameReady(function(){},"parent.form", {load: [{type:"stylesheet", src:"style.css", id:"_ss"}]});
 
			// Prevent browser from following link
			event.preventDefault();
		});
});

Open in new window

mindfriction12Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

sh0eCommented:

$(document).ready(function () {
        
    $("a").click(
                function(event){ 
                        // Get link ref
                        var href = $(this).attr("href");
                        // DEBUG
                        //alert(href);
                        // Load link ref into iFrame
                        $("iframe#form").attr({src: href});
                        
                        // Apply styles to loaded source
                        $.frameReady(function(){},"top.form", {load: [{type:"stylesheet", src:"style.css", id:"_ss"}]});
 
                        // Prevent browser from following link
                        event.preventDefault();
                });
});

Open in new window

0
mindfriction12Author Commented:
Hi Shoe,

yeah thats what i had and Firebug in Firefox was showing a permission error (see screenshot) and it didnt work in IE either... possible sandbox issue with iFrames?



iFrameCssIssue.GIF
0
sh0eCommented:
Are you trying to do this cross domain?
If you are, this is a security issue.  You aren't allowed to mess with sites on different domains, and iframes enforce this.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

mindfriction12Author Commented:
yeah im trying to do it cross domain.. i thought security *might* be an issue thanks!
0
mindfriction12Author Commented:
hi shoe,

if its a security issue with iFrame what about Frames?
0
sh0eCommented:
Same idea.  It is a security problem to allow manipulation across web sites.  That would allow XSS attacks.

To illustrate the point let me describe a scenario:
EvilSite - site that will try to do bad stuff
Gmail - your email account at gmail

EvilSite opens two frames:  EvilSite  |  Gmail
EvilSite uses JavaScript to grab data from Gmail through the frames.
All your emails are now belongs to EvilSite.
0
mindfriction12Author Commented:
aah thanks excellent metaphore/ example! i can just imagine the sorts of phishing that would go on if this was possible ;)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.