Skip to content Skip to sidebar Skip to footer

How Do I Load A Webpage Inside A Div Using Javascript Without Iframe And Jquery?

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.

Solution 1:

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.

Solution 2:

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

I know only this in js.

Solution 3:

You don't even need javascript-

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

<!doctype html><htmllang="en"><head><metacharset= "utf-8"><title>test page</title></head><body><div><objecttype="text/html"data="http://validator.w3.org/"width="800px"height="600px"style="overflow:auto;border:5px ridge blue"></object></div></div></body></html>

Solution 4:

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

Post a Comment for "How Do I Load A Webpage Inside A Div Using Javascript Without Iframe And Jquery?"