56

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).

Improve this question

5 Answers 5

Reset to default
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
Improve this answer
4
  • 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 8, 2011 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 8, 2011 at 15:53
  • 15
    This code depends on external page enable "allow-control-allow-origin: *", which you cannot guarantee.
    – FlavioEscobar
    Apr 23, 2015 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, 2016 at 6:57
37

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]-->
Improve this answer
6
  • 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, 2013 at 15:09
  • you can set the height to something like 2500px or something... I have the same issue.
    – Mike Q
    Apr 25, 2014 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, 2015 at 13:05
  • 1
    WOAW !! Just perfect where all solutions have failed for me ! Big thx !
    – TOPKAT
    Jan 19, 2017 at 9:25
  • 1
    setting the height to using a viewport height unit - height: 99vh, fixes the height issue
    – user147215
    Apr 6, 2017 at 17:45
2

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.

Improve this answer
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.

Improve this answer
1
  • 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, 2017 at 10:12
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/

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.