10

I want to display a page's content in my website using an iframe, but I want to "cut out" the header (top) portion of the page, leaving out its navigation bar, so the user can only see what is underneath it.

Code:

<div id="content">
    <div style="height:800px;">
        <iframe id="optomaFeed" src="http://www.optomausa.com/company/press-releases/" scrolling="auto"
            frameborder="0" height="100%" width="100%"></iframe>
    </div>
</div>

What are some ways I can go about doing this? Tyvm~

Nick Rolando
  • 25,879
  • 13
  • 79
  • 119
  • http://stackoverflow.com/questions/5676672/how-do-i-crop-the-contents-of-an-iframe-to-show-a-part-of-a-page Is the answer you were hoping for – pashute Mar 06 '14 at 01:39

2 Answers2

21

I figured out how to do it using css clip attribute:

<div id="content">
    <div style="height:800px;">
        <iframe id="optomaFeed" src="http://www.optomausa.com/company/press-releases/" scrolling="no"
            frameborder="0" height="100%" width="100%" style="position:absolute; clip:rect(190px,1100px,800px,250px);
            top:-160px; left:-160px;"></iframe>
    </div>
</div>
Nick Rolando
  • 25,879
  • 13
  • 79
  • 119
  • 1
    This seems to work nicely for the top and bottom of the page, but it doesnt width-ways when I resize the browser window... (FYI I'm testing in IE8 so I can see what 70%+ of the world will see) – DaveRandom Aug 25 '11 at 00:05
  • For sure, I haven't tried resizing the window, and I'm doing it in FF right now.. Its not displaying right in IE, so I got some adjustments to make. On the right track though :) Thanks for your input – Nick Rolando Aug 25 '11 at 00:39
  • 1
    What does clip get you that the negative top doesn't? – httpete Jul 21 '16 at 12:20
1

If the nav bar container has an id you could get a reference to it in javascript, then call parentNode.removeChild() on it. This would mean the nav bar would likely flash up for a second every time the page was changed within the iframe.

Alternatively, you could pass the loading of the iframe through a server-side script that loads it, strips out the HTML for the nav bar, then outputs the result. This would probably slow down the user's interaction with the page, since it would mean everything effectively required loading twice. If you are going to take this approach you would probably need to add a <base> tag so you don't break the CSS/JS.

DaveRandom
  • 87,921
  • 11
  • 154
  • 174
  • I'm trying to first suggestion atm. I was hoping for a simpler solution. Something like clipping the iframe itself using divs and styles or something – Nick Rolando Aug 24 '11 at 23:02
  • @Shredder I can't think of any practical way to do that with no scroll bars that guarantees the page is in the correct position within the frame that you can't see the nav but you can see the content you want. I have just tried the first idea and it doesn't work because the browser disables access to `contentWindow.document` when the page in iframe was not loaded from your domain. There is no work around that I can think of/find. The only option is a proxy script I think... – DaveRandom Aug 24 '11 at 23:05
  • 1
    I figured it out <_<; check my answer – Nick Rolando Aug 24 '11 at 23:59