1

How can i filter what information comes up in an iFrame?

Currently what is coming up in my iframe atm is;

https://i.stack.imgur.com/tBvAS.jpg

but i want to filter it to;

https://i.stack.imgur.com/dqpUB.jpg

?

Sirko
  • 72,589
  • 19
  • 149
  • 183
codingbenn
  • 13
  • 1
  • 1
  • 5

2 Answers2

6

You can't do anything with the iFrame contents if the domains are different, as you can see here and on a number of related questions. Though these typically center around using Javascript to modify the contents, the same limitations apply to CSS.

If these are on the same domain, you can do it with Javascript using answers like this.

If it's not on your domain, there are a few solutions for you to pick from. The first one is just HTML and CSS and works if the iFrame is at the very top of your page, or if you hide the top of the iFrame behind another element, like an image: you could use negative margin and overflow: hidden; to hide the scrollbars. Check it out on JSFiddle here.

HTML:

<iframe src="http://sbc.swarthmore.edu" scrolling="no">​

CSS:

iframe {
    width: 600px;
    height: 500px;
    overflow: hidden;
    margin-top: -50px;
}​

Though the scrolling="no" attribute isn't HTML5-valid, it's necessary to get rid of the bars in Chrome, as far as I know.

The second solution involves loading your external page internally, then pointing to that page. This gives you full control over the contents and styling of the page you're loading. You can do this with a number of languages, but I'll post how you'd do it with PHP.

Firstly, point your iFrame to a page on your domain, where you'll place the content.

<iframe src="local-content.php" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

Then in local-content.php, you begin by loading the target HTML file into a DOMDocument.

$dom = new DOMDocument;
$dom->loadHTMLfile("http://www.external-site.com/the-page.html");

Then you modify it all you want using the PHP DOM functions. An example would be adding a stylesheet to it:

$our_css_url = "static/css/style.css";
$element = $dom->createElement('link');
$element->setAttribute('type', 'text/css');
$element->setAttribute('rel', 'stylesheet');
$element->setAttribute('href', $our_css_url);

Add that to the head of your page:

$head = $dom->getElementsByTagName('head')->item(0);
$head->appendChild($element);

Then, of course, you output the whole thing:

echo $dom->saveHTML();
Community
  • 1
  • 1
jamesplease
  • 12,547
  • 6
  • 47
  • 73
  • The css thing didnt work :/ and i dont know how to code/use php – codingbenn Oct 28 '12 at 20:21
  • The first solution only works if the iFrame is at the very top of your page (I noted this in italics within the solution). The best I can think of otherwise is that `PHP` solution for now, assuming the source of the `iFrame` is external. – jamesplease Oct 28 '12 at 20:24
  • The css thing did work but looks very grotty and unprofessional where it is position :( thanks anyway – codingbenn Oct 28 '12 at 20:28
0

I don't think you can access the content inside <iframe> this is kind of canvas or a webview where the src url will rendered. you can't filter or modify the content which is rendered by the external source.

Satish Bellapu
  • 740
  • 1
  • 5
  • 15