How to embed a webpage using php or Javascript

Question

I have a webpage and I want to embed an external webpage on another server but I don't want any frame bars, and was hoping to use Php or Javascript to do this. The website I'm building is build using php.

I've tried

<?php
$remote = fopen("http://www.myotherwepage.com/apage", "r");
fpassthru($remote);
?>

But won't load properly no images will load and the style won't load.

This is the page I'm trying to embed

http://brands.datahc.com/?languageCode=EN

and I have my own (includes)naviagtion above and (includes)footer underneath.And it will need to expand and reseize for the user.

If you are going to try and dump the HTML from another page into your page, you are going to need to fix all the relative paths to various resources in that page. And even if you fix all those, you may well run into cross-domain problems. Just use an iframe already. You can style it to not show scroll bars. — Matt Burland
– Matt Burland, Commented Jan 23, 2013 at 14:21
@BenM do iframes resize automatically though? And it will need to expand and reseize for the user. — gSaenz
– gSaenz, Commented Jan 23, 2013 at 14:26
Yes, they can be programmed to resize automatically, even on another domain... css-tricks.com/cross-domain-iframe-resizing — BenM
– BenM, Commented Jan 23, 2013 at 14:28
By the way: Are you aware of potential copyright problems which might be caused by this? Just injecting someone elses content into your own website might be a copyright violation. — Philipp
– Philipp, Commented Jan 23, 2013 at 14:37

BenM · Accepted Answer · 2013-01-23 14:24:44Z

3

Just add an iframe element, and then style it using CSS. You can manipulate its size using jQuery or vanilla JS.

This way, you don't need to worry about fixing any broken or relative links. For example, the following code will turn off the scrollbars for the iframe:

<iframe src="http://brands.datahc.com/?languageCode=EN" srcolling="no"></iframe>

You could in turn look to implement some of the following functionality > http://css-tricks.com/cross-domain-iframe-resizing/. This will also ensure that the iframe is resized according to its content.

answered Jan 23, 2013 at 14:24

BenM

53.3k26 gold badges116 silver badges172 bronze badges

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

2 Comments

JohnnyQ Over a year ago

Iframe doesn't seem to work and re sizes to default size with bars, and I want to move away from the iframe as it's not HTML5 compliant.

Matt Burland Over a year ago

@JohnnyQ: What makes you think it's not HTML5 compliant? HTML 5 even adds the new seamless and sandbox properties to iFrame. See here

Philipp · Accepted Answer · 2013-01-23 14:43:53Z

2

The problem is that all the images on the website are embedded with relative paths.

When you embed the website example.com which refers to an image http://example.com/image.jpg, its sourcecode only reads src="image.jpg". When you then integrate the sourcecode of that website into example.org, the image will be searched on http://example.org/image.jpg where it doesn't exist.

As a solution you could

rewrite all relative links and image paths by using a HTML parser or
use the HTML <base> element in the <head> of your website and set it to the url of the page you are embedding. That way the users web browser will interprete all relative URLs as relative to the embedded page, not the url of your own page.

edited Jan 23, 2013 at 14:43

answered Jan 23, 2013 at 14:25

Philipp

70.1k10 gold badges121 silver badges159 bronze badges

Collectives™ on Stack Overflow

How to embed a webpage using php or Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related