Solved

Add style to cross domain iFrame

Posted on 2010-08-16
5
5,233 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 6

Expert Comment

by:stilliard
ID: 33449607
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
ID: 33449653
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
ID: 33449781
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
ID: 33449810
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
ID: 33451050
I like that.
0

Featured Post

The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

734 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