Cutting out some of the iframe's src content

Question

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~

Answer 1

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>

Answer 2

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.