Can an iframe only show a certain part of the page?

Question

I am working on iframes, and I need to show a certain portion of the page [say, the top right ] in an iframe with about 300px width and 150px height.

Example:

Say I wanted to put an iframe of www.example.com/portfolio.php on a page, but have the iframe sized to only show the "portfolio-sports" section at the top right.

How can I achieve this?

DEMO

[Thanks to Pointy]

I don't think that using an `` is really the right way to do this. — Pointy, Jul 17 '10 at 15:36

score 106 · Accepted Answer · edited Sep 12 '22 at 14:39

106

An <iframe> gives you a complete window to work with. The most direct way to do what you want is to have your server give you a complete page that only contains the fragment you want to show.

As an alternative, you could just use a simple <div> and use the jQuery "load" function to load the whole page and pluck out just the section you want:

$('#target-div').load('http://www.example.com/portfolio.php #portfolio-sports');

There may be other things you need to do, and a significant difference is that the content will become part of the main page instead of being segregated into a separate window.

edited Sep 12 '22 at 14:39

Stephen Ostermiller

23,933
14
88
109

answered Jul 17 '10 at 15:39

Pointy

405,095
59
585
614

Thanks Pointy. It is just what I was looking at - "Skipped iframe". – MANnDAaR Jul 17 '10 at 16:02
1

not sure, but if the loaded html contains a POST form I'm not sure the submit to the server works due to security restrictions (same origin policy). – Paolo Nov 11 '14 at 23:38
2

@Paolo well if it's content from some different domain then the `.load()` won't work unless the source site sets appropriate CORS headers. If it does load, then a POST should work just fine. – Pointy Nov 11 '14 at 23:50
thanks, indeed. I tried anyway and firebug said "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.example.com/. This can be fixed by moving the resource to the same domain or enabling CORS." – Paolo Nov 12 '14 at 00:59
4

Be aware that this is not going run any scripts/styles which are being loaded from a page via jQuery `load()`. You have to handle this with `$.getScript` among other things. – adamj Jan 15 '16 at 05:01
1

more chances of cors issues – Kurkula Sep 06 '17 at 20:19
Isn't there some significant security concerns to blindly grabbing content from another domain? – Jane Panda Sep 03 '20 at 17:04
@JanePanda I'd say so, generally, but there are many kinds of "other domains" in the world; it depends on the situation. – Pointy Sep 03 '20 at 17:19
@Pointy how can I use it in pure js? – Rohit Nishad Dec 16 '20 at 13:55
@RohitNishad that is a broad question; there is no native browser API like the jQuery `.load()` mechanism. – Pointy Dec 16 '20 at 14:29

Shiku gfa · Answer 2 · 2013-05-14T06:07:31.350

57

I got this work good for me.

<div style="border: 3px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 736px;">
<iframe scrolling="no" src="http://www.w3schools.com/css/default.asp" style="border: 0px none; margin-left: -185px; height: 859px; margin-top: -533px; width: 926px;">
</iframe>
</div>

Is this working for you or not let us know.

Source: http://www.dimpost.com/2012/12/iframe-how-to-display-specific-part-of.html

edited May 14 '13 at 06:07

answered May 14 '13 at 06:01

Shiku gfa

571
4
3

4

I think this is the correct solution, the accepted answer doesn't fulfill the requirement with iframe. – Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ Jan 06 '17 at 08:10
scrolling no is not working for me in react js application – yaswanthkoneri Nov 21 '19 at 06:46

score 15 · Answer 3 · edited Sep 10 '13 at 00:49

I needed an iframe that would embed a portion of an external page with a vertical scroll bar, cropping out the navigation menus on the top and left of the page. I was able to do it with some simple HTML and CSS.

HTML

<div id="container">
    <iframe id="embed" src="http://www.example.com"></iframe>
</div>

CSS

div#container
{
    width:840px;
    height:317px;
    overflow:scroll;     /* if you don't want a scrollbar, set to hidden */
    overflow-x:hidden;   /* hides horizontal scrollbar on newer browsers */

    /* resize and min-height are optional, allows user to resize viewable area */
    -webkit-resize:vertical; 
    -moz-resize:vertical;
    resize:vertical;
    min-height:317px;
}

iframe#embed
{
    width:1000px;       /* set this to approximate width of entire page you're embedding */
    height:2000px;      /* determines where the bottom of the page cuts off */
    margin-left:-183px; /* clipping left side of page */
    margin-top:-244px;  /* clipping top of page */
    overflow:hidden;

    /* resize seems to inherit in at least Firefox */
    -webkit-resize:none;
    -moz-resize:none;
    resize:none;
}

score 9 · Answer 4 · edited Sep 11 '14 at 01:54

9

<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; border: solid 2px #555; width:594px; height:332px;">
<div style="overflow: hidden; margin-top: -100px; margin-left: -25px;">
</div>
<iframe src="http://example.com/" scrolling="no" style="height: 490px; border: 0px none; width: 619px; margin-top: -60px; margin-left: -24px; ">
</iframe>
</div>
</div>

edited Sep 11 '14 at 01:54

hexacyanide

88,222
31
159
162

answered Feb 19 '13 at 17:48

Shuvojit Das

195
2
10

1

I love the idea. I used it in my website, work fine but need to be updated each time the target website update its content – ReaperSoon Feb 17 '17 at 10:06

score 3 · Answer 5 · edited Sep 11 '14 at 01:53

3

Somehow I fiddled around and some how I got it to work:

<iframe src="http://www.example.com#inside" width="100%" height="100%" align="center" ></iframe>

I think this is the first time this code has been posted so share it

edited Sep 11 '14 at 01:53

hexacyanide

88,222
31
159
162

answered Dec 04 '11 at 13:19

TangentSpy

71
1
1

1

I think this #inside should be part of external website which will not be under our control. – Kurkula Sep 06 '17 at 20:20

score 2 · Answer 6 · edited May 23 '17 at 12:18

2

Set the iframe to the appropriate width and height and set the scrolling attribute to "no".

If the area you want is not in the top-left portion of the page, you can scroll the content to the appropriate area. Refer to this question:

Scrolling an iframe with javascript?

I believe you'll only be able to scroll it if both pages are on the same domain.

edited May 23 '17 at 12:18

Community

1
1

answered Jul 17 '10 at 15:24

BrandonG

367
1
5

score 1 · Answer 7 · edited Sep 12 '22 at 14:40

Assuming you are using an iframe to import content available to the public but not owned by you into your website, you can always use the page anchor to direct you iframe to load where you want it to.

First you create an iframe with the width and height needed to display the data.

<iframe src="http://www.example.com/page2.html" width="200px" height="100px"></iframe>

Second install addon such as Show Anchors 2 for Firefox and use it to display all the page anchors on the page you would like display in your iframe. Find the anchor point you want your frame to use and copy the anchor location by right clicking on it.

(You can download and install the plugin here => https://addons.mozilla.org/en-us/firefox/addon/show-anchors-2/)

Third use the copied web address with anchor point as your iframe source. When the frame loads, it will show the page starting at the anchor point you specified.

<iframe src="http://www.example.com/page2.html#anchorname_1" width="200px" height="100px"></iframe>

That is the condensed instruction list.

Can an iframe only show a certain part of the page?

7 Answers7

Linked

Related