2

I need to load an external webpage into a div. I don't want to use an iFrame. And I want this done with plain Javascript. I'm not sure how to go about it.

Jay
  • 159
  • 1
  • 1
  • 10
  • 1
    I don't think that is possible. You may need to use an iframe – Eric Goncalves Mar 04 '13 at 22:01
  • 3
    Of course it's possible. Ever hear of AJAX? – glomad Mar 04 '13 at 22:29
  • 1
    Does this answer your question? [Load html contents of a given url and place exactly there (like document.write()) in JavaScript](https://stackoverflow.com/questions/25340450/load-html-contents-of-a-given-url-and-place-exactly-there-like-document-write) – Michael Freidgeim Jul 16 '20 at 07:59

4 Answers4

6

With difficulty…

Use Ajax (e.g. via XMLHttpRequest) to get the page. Since it is external, you will need to bypass the same origin policy.

Once you have the page, extract the relevant parts of it (probably the children of the body element) and add that to your existing DOM.

You'll need to account for differing stylesheets between your site and the external one, for relative URIs (to resources on the external site that aren't on yours), and for any scripts in the remote content.

Community
  • 1
  • 1
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • i want to be able to do it without ajax as well – Jay Mar 04 '13 at 22:23
  • 4
    @jay — Since "Ajax" just means "Making an HTTP request from JS without leaving the page" and the only way to get "a page" is to make an HTTP request, and you want to do it with JavaScript and you want to load it into the current page … that's impossible by definition. – Quentin Mar 04 '13 at 22:25
2

Whichever method you have, in js, try this instead : $('#myid').load('mylink.com')

I know only this in js.

Patrick Mutwiri
  • 1,301
  • 1
  • 12
  • 23
  • are there another alternative using pure js? – Goku Apr 19 '15 at 20:22
  • Yeah. I think this is what you are looking for . Check out this [Question](http://stackoverflow.com/questions/25340450/load-html-contents-of-a-given-url-and-place-exactly-there-like-document-write) @goku – Patrick Mutwiri Apr 20 '15 at 04:59
1

You don't even need javascript-

but the same restrictions apply as for iframe inclusion of different domains.

<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>test page</title>
</head>
<body>

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


</body>
</html>
kennebec
  • 102,654
  • 32
  • 106
  • 127
  • Essentially though, an object pointing to an HTML document *is* an iframe, with all the limitations of iframes and then some more limitations because it isn't specifically designed for rendering a sub-browser canvas. – Quentin Mar 05 '13 at 06:57
0

You should be able to load html pages within a page using the jQuery.get() method. I'm using this method for two websites for my clients, where the individual pages are different sections of the site.

I'm unsure of the behavior you may encounter if you attempt to use this method loading full HTML pages that include header information and the body tag. I recommend using it to load HTML snippets.

jQuery.get()

theaccordance
  • 889
  • 5
  • 13