?
Solved

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

Posted on 2008-11-17
7
Medium Priority
?
4,910 Views
Last Modified: 2012-05-05
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

0
Comment
Question by:mindfriction12
  • 4
  • 3
7 Comments
 
LVL 16

Assisted Solution

by:sh0e
sh0e earned 500 total points
ID: 22982528

$(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
 

Author Comment

by:mindfriction12
ID: 22991853
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
 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
ID: 22994409
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:mindfriction12
ID: 22999942
yeah im trying to do it cross domain.. i thought security *might* be an issue thanks!
0
 

Author Comment

by:mindfriction12
ID: 22999961
hi shoe,

if its a security issue with iFrame what about Frames?
0
 
LVL 16

Expert Comment

by:sh0e
ID: 23001001
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
 

Author Comment

by:mindfriction12
ID: 23009321
aah thanks excellent metaphore/ example! i can just imagine the sorts of phishing that would go on if this was possible ;)
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

621 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question