CODEWITHSUNDEEP
phpjavascript
JohnnyQ
JohnnyQ

Reputation: 543

How to embed a webpage using php or Javascript

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.

Upvotes: 0

Views: 3368

Answers (2)

Philipp
Philipp

Reputation: 69663

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.

Upvotes: 2

BenM
BenM

Reputation: 53198

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.

Upvotes: 3

Related Questions