/    Sign up×
Community /Pin to ProfileBookmark

Resizing Page inside an Iframe

Copy linkTweet thisAlerts:
Mar 15.2013

Hi Everyone,
Is it possible to resize the webpage inside of an iframe? I would like to make the width of the page inside of the iframe the same as the width of the iframe so that I do not need to use the horizontal scroll bar to see the full width of the webpage? Thanks in advance.

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebWarriorMar 15.2013 — Hi Developer1,

You can accomplish this by setting the width property of your page's body. The body's width will need to be a little less than the width of the iframe though. Assuming your iframe is 600px, the following code can be used.[I]

body {

width: 560px; /* You might be able to use a little more than that. Experiment if you like */

}



Hope this helps.

[/I]
Copy linkTweet thisAlerts:
@TheMachineMar 15.2013 — Why are you using an iframe anyway?
Copy linkTweet thisAlerts:
@Developer1authorMar 15.2013 — Hi, thanks for replying. I am using an iframe to display external web pages on my site. I've read that you can use the object element to display external web pages on your site but I don't know if it is compatible with non-microsoft browsers.
Copy linkTweet thisAlerts:
@Developer1authorMar 15.2013 — Hi, thanks for replying. When you say "setting the width property of your page's body", are you talking about the width property of my web page or the width property of the external web page being displayed inside of my iframe? If you are referring to the width property of my web page, wouldn't setting its width to 600px or less mess up its current layout?
Copy linkTweet thisAlerts:
@WebWarriorMar 15.2013 — I was referring to the body tag's width property of the external page that you are trying to load via iframe.
Copy linkTweet thisAlerts:
@Developer1authorMar 16.2013 — Hi I forgot to ask you how one can set the width property of an external page that is not on your domain. I know how to set the width property of any page within my domain but not a page that belongs to other people's domain.
Copy linkTweet thisAlerts:
@WebWarriorMar 16.2013 — Hi,

Normally, you can't change CSS on the external file. There are ways to accomplish this though like using PHP's file_get_contents function to retrieve the external file's content, modify it to your needs, and re-save the file on your domain. Another option is to get the external file's contents via AJAX, then your site's global styles will naturally apply to it.
×

Success!

Help @Developer1 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...