85

I need to load a responsive website into a div in my HTML page without using an iframe element.

I have tried this link; it's working for a single page URL, which I mentioned in the script.

$('#mydiv').load('http://localhost/qa/ask#external-div', function(response, status, xhr) {
    if (status == "error") {
        var msg = "Sorry but there was an error: ";
        alert(msg + xhr.status + " " + xhr.statusText);
      }
});
General Grievance
  • 4,555
  • 31
  • 31
  • 45
user2089987
  • 1,041
  • 4
  • 15
  • 23
  • Do you have permission from the external website owners to do this? Framing another site within your own is "frowned upon" (if not a blatant breach of copyright). – iCollect.it Ltd Aug 09 '13 at 11:08
  • I have tried to display external website into my webpage div using jquery.but its working for a singe page of the external website.i need to display the entire external website(all pages) within a div in my webpage. – user2089987 Aug 09 '13 at 11:10
  • possible duplicate of [How do I load a webpage inside a div using Javascript without IFRAME and JQuery?](http://stackoverflow.com/questions/15211969/how-do-i-load-a-webpage-inside-a-div-using-javascript-without-iframe-and-jquery) – Optimus Prime Aug 09 '13 at 11:11
  • 5
    There is no need of permission because i am trying to display one of my own webpage into a div of my another html webpage – user2089987 Aug 09 '13 at 11:22
  • Possible duplicate of [Ajax/jQuery - Load webpage content into a div on page load?](http://stackoverflow.com/questions/9963799/ajax-jquery-load-webpage-content-into-a-div-on-page-load) – Matt Nov 03 '15 at 13:50
  • interesting that `$(function(){ $("#includedContent").load("blah.html"); });` or with http://server/blah.html, doesn't work when server is other than the current one. – barlop Nov 24 '17 at 05:17
  • Should you use iframe? https://stackoverflow.com/questions/924946/use-of-iframe-or-object-tag-to-embed-web-pages-in-another – Michael Freidgeim Jul 16 '20 at 07:42

2 Answers2

133

Using simple html,

 <div> 
    <object type="text/html" data="http://validator.w3.org/" width="800px" height="600px" style="overflow:auto;border:5px ridge blue">
    </object>
 </div>

Or jquery,

<script>
        $("#mydiv")
            .html('<object data="http://your-website-domain"/>');
</script>

JSFIDDLE DEMO

Optimus Prime
  • 6,817
  • 5
  • 32
  • 60
  • 1
    If i used like this i am getting the scroll bar like we are getting while implementing iframe inside a div.can u tell some other way to display a website in a html page – user2089987 Aug 09 '13 at 11:19
  • You can hide the scrollbars if you like. – Optimus Prime Aug 09 '13 at 11:20
  • add `overflow:hidden` to the iframe or obeject. – Optimus Prime Aug 09 '13 at 11:35
  • I am implementing this object tag with in a responsive website so i cant able to specify widht,height and also i cant use overflow:hidden.it will be better if you suggest some other solution instead of using object – user2089987 Aug 09 '13 at 12:00
  • 1
    mwell, you are using jquery, right ?... `$("#myContainer").css("overflow","hidden");` – TCHdvlp Aug 09 '13 at 13:04
  • @OptimusPrime, no It was a repply to user2089987. He said he can't modify the css. He can if he uses jquery or javascript... – TCHdvlp Aug 09 '13 at 14:42
  • @TCHdvlp yes he can. but doesn't seem to work here, check http://jsfiddle.net/SsJsL/60/ – Optimus Prime Aug 09 '13 at 17:58
  • 1
    @Optimus Prime , yes it does work (FF 27.0), dunno how your view is, but the scrollbar you see is the one from the fiddle HTML element.If look at the first fiddle you see 2 scrollbars.Or do i misinterpreter wrong? – HenryW Jan 22 '14 at 22:25
  • @OptimusPrime if i want to load just part of the page lets say the div with class `.the_class_i_want` not the whole webpage? – indago Feb 28 '14 at 06:45
  • @indago https://www.google.co.in/search?q=how+to+load+only+part+of+a+page+in+iframe&oq=load+only+part+of+page+in&aqs=chrome.1.69i57j0l2.5781j0j7&sourceid=chrome&espv=210&es_sm=93&ie=UTF-8 try these links. – Optimus Prime Mar 02 '14 at 18:42
  • @user2089987 does this answer not solve your problem? – Optimus Prime Mar 19 '14 at 15:01
  • Thank you for this post. It is exactly what i am looking for but in my case the 800*600 window is empty. does anyone know why this might be? I am using the div on my homeserver. – Embed101 May 03 '14 at 16:51
  • @Embed101 why don't you share a fiddle? or ask a new question. More people would be able to help. – Optimus Prime May 05 '14 at 13:54
  • Superb Answer... Appreciate this –  May 23 '14 at 05:28
  • why do some websites like google.com or youtube don't show using the `object` tag? – Fanckush Aug 07 '14 at 22:03
  • Load denied by X-Frame-Options: https://system.netsuite.com/pages/customerlogin.jsp?country=US does not permit cross-origin framing. – Yster Jun 18 '15 at 10:15
  • Can someone tell me how to access the elements of the HTML loaded in object tag? Eg: Fetching text input value using jQuery `$('#username').val();` – Kiran Reddy Feb 16 '17 at 07:24
  • http://stackoverflow.com/questions/42267945/how-to-access-the-elements-of-the-html-loaded-in-object-tag – Kiran Reddy Feb 16 '17 at 07:56
  • The jQuery example in the linked JSFiddle demo doesn't work. At least, not in the version of Chrome I'm using. YMMV. The browser console contains the message, `Refused to frame 'https://system.netsuite.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".` However, the simple HTML example does work. That may be fine for anyone who needs to load a page from a static URL. – Mr. Lance E Sloan Oct 15 '21 at 14:16
5

As mentioned in this stackoverflow thread, difference between iframe, embed and object elements

You can use <embed> tag, instead of <object> tag. If you require communication between child and parent.

† As pointed out in the comments below; scripts in <object> will run but the parent and child contexts can't communicate directly. With <embed> you can get the context of the child from the parent and vice versa. This means they you can use scripts in the parent to manipulate the child etc. That part is not possible with <object> or <iframe> where you would have to set up some other mechanism instead, such as the JavaScript postMessage API.

<embed type="text/html" src="snippet.html" width="500" height="200">
Daniel Inbaraj
  • 778
  • 8
  • 9