Solved

Add style to cross domain iFrame

Posted on 2010-08-16
5
5,379 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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

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…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
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 …
Suggested Courses

636 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