iFrame - how would I filter out the top of a webpage?

Question

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

Currently what is coming up in my iframe atm is;

but i want to filter it to;

?

Can you explain how these Iframes are used or give an example of code? — , Oct 28 '12 at 19:18
didn't understood anything, are you asking about that javascript? — Mr. Alien, Oct 28 '12 at 19:18

score 6 · Accepted Answer · edited May 23 '17 at 12:31

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();

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

score 0 · Answer 2 · answered Oct 28 '12 at 19:20

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.

answered Oct 28 '12 at 19:20

Satish Bellapu

740
1
5
15

so you couldnt just make it filter out the top by positioning the ? – codingbenn Oct 28 '12 at 19:31
What do you mean by filtering out ? do you want to hide the section of the display area in the iframe ? – Satish Bellapu Oct 28 '12 at 19:36
If that is the case you can achieve with css... play with some margin-top field in -ve values... this will help – Satish Bellapu Oct 28 '12 at 19:44

iFrame - how would I filter out the top of a webpage?

2 Answers2