load external site into div

Question

How can I load an external site onto another site? (load the entire page without scroll, borders)

I tried this but it does not load the entire page, and there are scroll/borders?)

<!DOCTYPE HTML> <html> <body> <iframe src="http://www.externaldomain.com" name="iframeName" ></iframe> </body> </html>

EDIT: seamless, what does this do? http://www.w3schools.com/html5/tag_iframe.asp

Add what you have already tried, what you are trying to accomplish, and what you have found out so far. — Milad Naseri
– Milad Naseri, Commented Jan 14, 2012 at 22:08

Milad Naseri · Accepted Answer · 2012-01-14 22:07:50Z

3

You have to remove the borders using CSS and then expanding the iFrame to encompass your entire client site using JavaScript. In this way, no one will notice a thing.

But sometimes the host site is clever enough to avoid that by checking the window.top against window.self element.

answered Jan 14, 2012 at 22:07

Milad Naseri

4,1281 gold badge30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

001 Over a year ago

that is fine, I own both sites :) got an example?

Milad Naseri Over a year ago

Assuming you get the width and height of the window by the method outlined here, and store them in the variable w and h respectively, and you have the iframe as var iframe, you can do iframe.style.width=w+"px";, iframe.style.height=h+"px";,iframe.style.position="absolute";,iframe.style.left="0px";, and iframe.style.top="0px";. This will position the iframe in a way that it should encompass the whole of your page.

Eliseu Monar dos Santos · Accepted Answer · 2012-01-14 22:15:31Z

Like @Milad said, you can set the IFRAME dimensions to fill the browser window.

<iframe id="my-iframe" src="mypage.php" border="0" frameborder="0" scrolling></iframe>

An example using jQuery:

$('#my-iframe').css('height', $(window).height());

Don't forget to reset the page's margins and paddings with CSS to avoid unwanted spaces:

* { margin: 0; padding: 0; }

Becareful if you have more elements on the same page, like a heading bar. If so, subtract the window height by the others elements heights.

Collectives™ on Stack Overflow

load external site into div

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related