Home / CSS / HTML / iframe / Tutorial / Web Design / iFrame: How to show specific part of a webpage using iframe

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
iFrame: How to show specific part of a webpage using iframe iFrame: How to show specific part of a webpage using iframe Reviewed by Shuvojit Das on 10:03 PM Rating: 5

You May Also Like

23 comments:

  1. RashedDecember 25, 2012 at 3:20 AM

    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. RiazJanuary 6, 2013 at 2:53 AM

    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. Shiku gfaJanuary 13, 2013 at 3:40 PM

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

      Delete
  3. ThomasApril 5, 2013 at 3:15 PM

    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. AnonymousJune 26, 2013 at 4:50 AM

    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. 歌声倾洋July 9, 2013 at 10:05 AM

    Thanks very much for help.

    ReplyDelete
  6. AnonymousJuly 11, 2013 at 7:35 PM

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

    ReplyDelete
  7. AnonymousAugust 31, 2013 at 2:42 PM

    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
  8. stokedNovember 29, 2013 at 3:14 PM

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

    ReplyDelete
  9. AnonymousJanuary 25, 2014 at 8:20 PM

    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
  10. UnknownFebruary 3, 2014 at 1:31 PM

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

    ReplyDelete
  11. pembuatan websiteMarch 7, 2014 at 9:19 PM

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

    ReplyDelete
  12. AnonymousMarch 18, 2014 at 3:01 PM

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

    ReplyDelete
  13. Fraccionamiento Jardines del Bosque Ciudad JuarezApril 28, 2014 at 9:38 AM

    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
  14. AnonymousMay 13, 2014 at 4:33 PM

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

    ReplyDelete
  15. AnonymousNovember 18, 2014 at 6:54 AM

    Awesome! Worked perfect for me.

    ReplyDelete
  16. BnimbhalNovember 27, 2014 at 5:04 PM

    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
  17. UnknownDecember 11, 2014 at 5:33 AM

    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
  18. AnonymousJanuary 27, 2015 at 11:22 PM

    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
  19. HTML Code CutterMarch 7, 2015 at 7:40 PM

    After trying out lots of suggestions that were not satisfactory, finally a solution that is simple, clear and works! I must have been looking over six months for a good solution...

    Thanks, DIMPost!

    ~K

    ReplyDelete
  20. www.keygate.netOctober 15, 2015 at 12:25 AM

    thanks for this.. I have actually used this script a few times, just wanted to say - it works. I got it from repost on Stackoverflow

    ReplyDelete
  21. estaFebruary 18, 2016 at 10:21 PM

    Million thanks for the info, i am using wordpress with themebuilder, and this is working perfectly for me.

    ReplyDelete
  22. Szabó AndrásSeptember 19, 2017 at 1:48 AM

    If you refer to a div id in an url, you can "jump" to the wanted area of the external page, like this: http://domain.com#example_divid Before this, check external page's styles (css). Be careful with the copyrighted contents!
    I also want to ask geeks if it's also possible to refer to a div class (sometimes I do not found the right id on external page)? Thanks in advance, András

    ReplyDelete

Subscribe to: Post Comments ( Atom )
Powered by Blogger.