Is it possible to display only a certain div within an iframe?

Question

Let's say i have an iframe with the page 2.htm set as the src.

<iframe src="2.html"></iframe>

So this shows the 2.html. But 2.html has a div with the id 'within'. I want to only display the contents of 'within'.

How would i do this?

have you edit privileges for 2.html and could add some javascript or is it a foreign website you cannot change anything on? — Seybsen, Nov 27 '11 at 18:33

score 16 · Accepted Answer · edited Jan 16 '17 at 17:13

This is the CSS and html code to accomplish the task:

<style>
#outerdiv
{
   width:446px;
   height:246px;
   overflow:hidden;
   position:relative;
}

#inneriframe
{
   position:absolute;
   top:-412px;
   left:-318px;
   width:1280px;
   height:1200px;
}
</style>
<div id="outerdiv">
    <iframe src="2.html" id="inneriframe" scrolling="no"></iframe>
</div>

Try this out: http://jsfiddle.net/57MRn/

How does this work
The iframe is moved up within the outerdiv until only the within div is shown.

Is it possible to display only a certain div within an iframe?

1 Answers1

Linked