Embed an External Page Without an Iframe?

Question

Is there any way to embed an external web page without using an iframe? I have access to both sites, I just want the page that the content is embedded on to resize based on the content that is embedded (it will change over time, and be on multiple sites).

Thanks!

EDIT: I don't think any kind of AJAX would work because it's cross-site, and JavaScript doesn't let you load off-site content (as far as I'm aware).

score 47 · Accepted Answer · edited Sep 05 '13 at 18:00

47

You could load the external page with jquery:

<script>$("#testLoad").load("http://www.somesite.com/somepage.html");</script>
<div id="testLoad"></div>
//would this help

edited Sep 05 '13 at 18:00

Anil

2,539
6
33
42

answered Dec 08 '11 at 15:32

Sudhir Bastakoti

99,167
15
158
162

1

+1 - I think you will still need to allow a cross domain ajax call from www.orginaldomain.com to www.somesite.com. – DefyGravity Dec 08 '11 at 15:36
1

I don't think you can use javascript includes because it's limited for security reasons. DefyGravity, how would I go about that? – JacobTheDev Dec 08 '11 at 15:53
15

This code depends on external page enable "allow-control-allow-origin: *", which you cannot guarantee. – FlavioEscobar Apr 23 '15 at 14:23
this is not work in SharePoint like web parts. Did SharePoint not permit to me to load other files by js? @FlavioEscobar – saber tabatabaee yazdi Sep 11 '16 at 06:57

ptriek · Answer 2 · 2011-12-08T16:26:36.467

35

Or you could use the object tag:

http://jsfiddle.net/7MaXx/

<!--[if IE]>
<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="http://www.google.be">
<p>backup content</p>
</object>
<![endif]-->

<!--[if !IE]> <-->
<object type="text/html" data="http://www.flickr.com" style="width:100%; height:100%">
<p>backup content</p>
</object>
<!--> <![endif]-->

edited Dec 08 '11 at 16:26

answered Dec 08 '11 at 15:41

ptriek

9,040
5
31
29

1

Object tag has problem with height. even if give height:100%; still does not work. work only with fixed height value. Else need to get the external web page 's height and width. that something I could't find yet. If you could please help – Josh Apr 11 '13 at 15:09
you can set the height to something like 2500px or something... I have the same issue. – Mike Q Apr 25 '14 at 20:27
For my case I had to display a dynamically created HTML content inside Object. I was replacing the data attribute of the object tag runtime using jQuery as follows. element.attr('data',"data:text/html;charset=utf-8,"+escape(HTMLContent)) and it worked like charm . – Sahasrangshu Guha Jul 15 '15 at 13:05
1

WOAW !! Just perfect where all solutions have failed for me ! Big thx ! – TOPKAT Jan 19 '17 at 09:25
Very interesting. Will the html from the data= tag be able to interact with the parent page? For instance, if the page at data= has javascripts and css, can that javascript and css also effect the parent and its elements? Ty – Michael d Feb 05 '17 at 08:12
1

setting the height to using a viewport height unit - height: 99vh, fixes the height issue – Apr 06 '17 at 17:45

score 2 · Answer 3 · answered Dec 08 '11 at 15:32

Question is good, but the answer is : it depends on that.

If the other webpage doesn't contain any form or text, for example you can use the CURL method to pickup the exact content and after then showing on your page. YOu can do it without using an iframe.

But, if the page what you want to embed contains for example a form it will not work correctly , because the form handling is on that site.

score 1 · Answer 4 · edited Feb 02 '15 at 19:57

What about something like this?

<?php
$URL = "http://example.com";
$base = '<base href="'.$URL.'">';
$host = preg_replace('/^[^\/]+\/\//', '', $URL);
$tarray = explode('/', $host);
$host = array_shift($tarray);
$URI = '/' . implode('/', $tarray);
$content = '';
$fp = @fsockopen($host, 80, $errno, $errstr, 30);
if(!$fp) { echo "Unable to open socked: $errstr ($errno)\n"; exit; } 
fwrite($fp,"GET $URI HTTP/1.0\r\n");
fwrite($fp,"Host: $host\r\n");
if( isset($_SERVER["HTTP_USER_AGENT"]) ) { fwrite($fp,'User-Agent: '.$_SERVER

["HTTP_USER_AGENT"]."\r\n"); }
fwrite($fp,"Connection: Close\r\n");
fwrite($fp,"\r\n");
while (!feof($fp)) { $content .= fgets($fp, 128); }
fclose($fp);
if( strpos($content,"\r\n") > 0 ) { $eolchar = "\r\n"; }
else { $eolchar = "\n"; }
$eolpos = strpos($content,"$eolchar$eolchar");
$content = substr($content,($eolpos + strlen("$eolchar$eolchar")));
if( preg_match('/<head\s*>/i',$content) ) { echo( preg_replace('/<head\s*>/i','<head>'.

$base,$content,1) ); }
else { echo( preg_replace('/<([a-z])([^>]+)>/i',"<\\1\\2>".$base,$content,1) ); }
?>

The OP asked for a JS solution. Also, in the tags there's nothing about the OP using PHP, only ASP.net — Robert Dundon, Dec 22 '14 at 14:08
Even if that's not exact solution, that's a very helpful php script for the other people to use, +1 — electroid, Jun 23 '16 at 15:54
Not a valid answer for a JS requirement. I do not use PHP. How will it help me? You could put a pseudo code though. That would be helpful — Tarun, Nov 16 '16 at 19:17

score 1 · Answer 5 · answered Dec 05 '15 at 22:21

1

Why not use PHP! It's all server side:

<?php print file_get_contents("http://foo.com")?>

If you own both sites, you may need to ok this transaction with full declaration of headers at the server end. Works beautifully.

answered Dec 05 '15 at 22:21

martar

47
4

Php will do the jpb fine, producing extra load to your server. Client side solutions (js) will keep your server nice and fresh – Augusto Jun 27 '17 at 10:12

score 1 · Answer 6 · answered Sep 07 '16 at 09:51

1

HTML Imports, part of the Web Components cast, is also a way to include HTML documents in other HTML documents. See http://www.html5rocks.com/en/tutorials/webcomponents/imports/

answered Sep 07 '16 at 09:51

lafeber

2,683
1
27
29

Embed an External Page Without an Iframe?

6 Answers6

Linked