Solved

Add style to cross domain iFrame

Posted on 2010-08-16
5
4,394 Views
Last Modified: 2012-05-10
I want to add a style to a cross domain iframe so that the left nav and header are hidden in the iframe.  I basically just want to display the main content in the iframe.

I know that doing this with javascript is problematic due to security restrictions.  I don't have easy access to the iframe code but I might be able to add something as it is on the Point2 realestate site and there might be a way to add content but I think I would have to add some javascript.

If so, maybe there would be a way to just check if there is a parent frame and if the parent frame is my frame.  I could then set the style of those elements to display: none.  Wondering if there is another way with CSS in the iframe of some other method.  I don't think there is an easy way or any way to do it from the parent.
0
Comment
Question by:sscotti
  • 3
  • 2
5 Comments
 
LVL 6

Expert Comment

by:stilliard
Comment Utility
You could try using php, you could have your iframe link to a page on your domain, which would request the page you want, but you could also embed css into the page this way.

Other than this, i found a site asking what i think is the same question and they have several ideas on there.
http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe
0
 
LVL 5

Author Comment

by:sscotti
Comment Utility
Can you elaborate on the first option.  I am using PHP.  Is this pretty much like using a proxy?
0
 
LVL 6

Accepted Solution

by:
stilliard earned 500 total points
Comment Utility
basicly your php file refferenced by the iframe should look something like this:

 
<?php

// set the url of the page you would have previously linked to in the iframe
//$url = 'http://www.website-to-request.com/';
$url = 'http://www.reallyeasycart.co.uk/';

// Setup the new css you want to inject into the page 
$css = '
<style type="text/css">

body { background: green; }
.some-other-elements { ... }

</style>
';

// Get the file contents (you may want to replace this with a curl request 
$site_content = file_get_contents($url);

// a simple way to inject style into this page would be to ad it directly above the closing head tag (if there is one) 
// this can be changed to any element, or even using the dom class you could ammend this with more detail. 
$site_content = str_replace('</head>', $css.'</head>', $site_content);

// you may also need to inject a base href tag so all the links inside are still correct
// comment out the next line if not needed 
$site_content = str_replace('<head>', '<head><base href="'.$url.'" />', $site_content);

// return the site contents to the browser
echo $site_content;
?>

Open in new window

0
 
LVL 6

Expert Comment

by:stilliard
Comment Utility
sorry about that, just ignore the reference to the url on there, ive been looking at there e-commerce cart today and thought id test this script on them for a second, its not important to the script anyway.
basicly you would replace that url with the one you want to use,
and then add the css into the $css var.
0
 
LVL 5

Author Closing Comment

by:sscotti
Comment Utility
I like that.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

772 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now