Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I crop the contents of an Iframe to show a part of a page?

I am currently working on a website which must download content from another website through the use of an iframe. Is there any way that I can crop the contents of the downloaded page to only show a section of that page on my website?

like image 286
Eon Avatar asked Apr 15 '11 12:04

Eon


People also ask

Can you edit iframe?

Short answer: it is no longer possible. You can't modify iframe contents even if you are only working with local files. It looks likes users were able to edit the iframe contents via JavaScript in the 2010s with HTML4 or HTML5.

How do you put only a certain section of a website into an iframe?

The most direct way to do what you want is to have your server give you a complete page that only contains the fragment you want to show. As an alternative, you could just use a simple <div> and use the jQuery load function to load the whole page and pluck out just the section you want: $('#target-div').

How do I resize an iframe in HTML?

Edit the width attribute. You should see the attribute "width=" after the URL in the iframe tag. Edit the width in pixels in quotations (" ") after the "width=" attribute. For example, if you want the width to be 300 pixels, you would enter "width="300px"" after the URL in the tag.

What is an imbedded iframe?

An inline frame (iframe) is a HTML element that loads another HTML page within the document. It essentially puts another webpage within the parent page. They are commonly used for advertisements, embedded videos, web analytics and interactive content.


2 Answers

Is there any way that I can crop the contents of the downloaded page to only show a section of that page on my website?

No. The Same Origin Policy prevents you from manipulating the iframe in any way, including the scroll position.

There would be a workaround by putting the iframe into an a div container that has a defined height and width, and overflow: hidden to clip the view port:

<div style="width: 500px; height: 500px; overflow: hidden">

and giving the iframe a relative position:

<iframe src="..." style="position: relative; left: -100px; top: -100px">

this way, you can adjust the portion of the iframe that is visible on the page. However, the whole page still gets rendered, and this approach is not immune to influences like scrolling inside the iframe.

like image 199
Pekka Avatar answered Oct 15 '22 13:10

Pekka


<div style="position: absolute; left: 0px; top: 0px; border: solid 2px #555; width:594px; height:332px;">
<div style="overflow: hidden; margin-top: -100px; margin-left: -25px;">
</div>
<iframe src="http://www.centricle.com/tools/html-entities/" scrolling="no" style="height: 490px; border: 0px none; width: 619px; margin-top: -60px; margin-left: -24px; ">
</iframe>
</div>
</div>

This code worked for me.

Source [ http://extechbuzz.blogspot.com/2012/12/iframe-how-to-display-specific-part-of.html ]

like image 29
Razzak Avatar answered Oct 15 '22 11:10

Razzak