iFrame: How to show specific part of a webpage using iframe


Someone ask me “how can i display a specific area of a website using iframe ?” So today I’m going to show a way to display specific area/portion of a webpage using iframe tag. Iframing an external webpage is not so tough. We just need a little knowledge about basic HTML and CSS to do that.
The <iframe> tag specifies a floating inline frame, used to embed external content in a webpage. Using ifrmae easily we could display an external webpage including text, images, and videos etc. But here we're going to see "how to display a specific part of a website using <iframe>"

Why do we need to iframe a specific area of a website?

Sometimes if we want to show certain part of an external webpage in our site/blog; iframing is the best easy way to do so.


Demo / Example


Follow the instruction below to display a specific area of a webpage using iFrame & CSS

To do that just copy the code below and paste it wherever you want display.
<div style="border: 2px solid #D5CC5A; overflow: hidden; margin: 15px auto; max-width: 575px;"> <iframe scrolling="no" src="http://tools.dimpost.com/proxy-server.html" style="border: 0px none; margin-left: -36px; height: 812px; margin-top: -486px; width: 650px;"> </iframe> </div>
Note: Replace the URL with yours. And to achieve your deserving result change the value of max-width, margin-left, height, margin-top, width. 

This is as an example of iframing a site’s specific area. as an example here I iframed some part of this page - http://tools.dimpost.com/proxy-server.html

Subscribe To Get Update In Your Email

19 comments:

  1. Howdy! I could have sworn I've been to this website before but after browsing through some of the post I realized it's new to me. Nonetheless, I'm definitely happy I found it and I'll be book-marking and checking back frequently!

    ReplyDelete
  2. I really like your blog.. very nice colors & theme. Did you make this website yourself or did you hire someone to do it for you? Plz answer back as I'm looking to construct my own blog and would like to know where u got this from.

    ReplyDelete
    Replies
    1. Thanks for commenting. I did all these stuff by myself here.

      Delete
  3. Thank you for this, after some tweaking with the positions and size it turned out to be exactly what I was looking for!

    ReplyDelete
  4. Hi! First of all, thank you for the trick! I've been searching for it for a while... But what I'd like to ask you is: How can I make it so that the background of the embedded page is shown? Thanks!

    ReplyDelete
  5. hello,
    nice post sir, I have on query. can i display the resulting page after the click in the same iframe?

    ReplyDelete
  6. Hi, I am sorry to say that its not working for all sites. Is there any way out for displaying some portion of aspx webpage that is showing some data on regualr interval basis ?

    ReplyDelete
  7. wow this actually works, didn' even think this was possible, thank you!

    ReplyDelete
  8. Thanks for this great Article. Sadly i found out that it is not cross-browser friendly: starting the iframe target webpage on position top -1200 (if it is a site with lots of stuff) IE and FF will not show the same part of the target. IE will start shifted down. Even IE8 and IE9 show different results. Only Way to get rid of this problem seams to create Browser specific CSS with the right positioning for each browser. A correct result it is depending a lot on the target of the iframe and the browser version.

    ReplyDelete
  9. Thank you so much ......... its working..... thank you sooooooooo much.........

    ReplyDelete
  10. awesome... this truelly what i looking for... thanks a lot for this iframe sciprt. very useful for me :D

    ReplyDelete
  11. it`s not working in Firefox 27.0.1 for me. In IE works fine.

    ReplyDelete
  12. This works great as long as my page is the same size or larger than the size of the iframe.

    Can I "shrink" the iframe to fit the size to fit the space I want to put it on?

    ReplyDelete
  13. Hi!!!
    Can anyone tell me how to disable right click in iframe???

    ReplyDelete
  14. Awesome! Worked perfect for me.

    ReplyDelete
  15. Million thanks, I checked many many website, even Stackoverflow but no use, their quality is going down.

    But finally i got the perfect code.

    Thanks again.

    ReplyDelete
  16. I need help.I made a code like this on my mac and it worked fine.Then I viewed the same code on a windows computer and it showed a different part of the page.After that I adjusted it on the windows and now it looks different on my mac.What should I do?

    ReplyDelete
  17. Hey! I am very pleased to say that Its working for me as well, but there is some problem I am facing right now, I am using this technique and generating dynamic iframes with dynamic content, the header of every page is hidden which is okay, but I have variable height of content like some of them are of 400px height and some divs are 1000px. In second case It works fine but in first case when i hide the page header It merges first slides content with second and a weird slide comes before my eyes which is not good, any suggestion about it please let me know on sohaib_ameen89@yahoo.com, I shall be very thankful to you.

    ReplyDelete