CODEWITHSUNDEEP
htmlcssiframepositioning
codingbenn
codingbenn

Reputation: 13

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

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

Currently what is coming up in my iframe atm is;

https://i.sstatic.net/tBvAS.jpg

but i want to filter it to;

https://i.sstatic.net/dqpUB.jpg

?

Upvotes: 1

Views: 18092

Answers (2)

jamesplease
jamesplease

Reputation: 12869

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

Upvotes: 6

Satish Bellapu
Satish Bellapu

Reputation: 740

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.

Upvotes: 0

Related Questions