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.

Improve this question
3

4 Answers 4

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

i want to be able to do it without ajax as well
@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.
2

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

I know only this in js.

Improve this answer

2 Comments

are there another alternative using pure js?
Yeah. I think this is what you are looking for . Check out this Question @goku
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>
Improve this answer

1 Comment

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

Improve this answer

4 Comments

The question says without jQuery.
As a suggestion, next time include that in the question text itself, not just the header.
Secondly, if you want to do it from the ground up, look at the XMLHttpRequest method for JavaScript.
Isn't jQuery just javascript? Look up the source for jQuery.get()

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.