How can I load a webpage into a <div> element?

Question

664.85K viewsSeptember 10, 2022html javascript

3

Robinho September 7, 2022 0 Comments

I’m quite new to Javascript and I have a question about loading a webpage into a div element (‘content-window’) on my website. I want to open a webpage in that div, in this case http://www.fdsa.com?ID=1. I’ve to write the following line in order to select the div element.

var sidediv = document.getElementById('content-window');

Can someone tell me how can I load a webpage into this side div? I’ve tried a lot (but I’ve failed of course). For example, the following line won’t work:

sidediv.location.assign = "http://www.fdsa.com?ID=1";

Thanks in advance!

3 Answers

score 0 · Answer 1 · 2022-09-08T11:47:12+00:00

Another approach is AJAX, if you don’t want it embeded inside and rather actually inline as part of the document.

The easiest (and for the sake of convenience, I will post it here) method utilizes jQuery, it’s so easy it’s incredible, obviously there are other methods but I have to post this one (I use it everywhere):

Here is the function:

.load("http://url.com/")

score 2 · Answer 2 · 2022-09-08T10:28:10+00:00

HTMLCODE :

  <body onload="loadHtml()">
    <div id="content-window"></div>
  </body>

CSS CODE :

#content-window {
    width: 100%;

}

#content-window object{
    width: 100%;

}

JAVASCRIPT :

function loadHtml() {
    document.getElementById("content-window").innerHTML='<object type="text/html" data="http://www.fdsa.com?ID=1"></object>';
}

score 5 · Answer 3 · 2022-09-08T04:53:46+00:00

you should use an <iframe> tag as follows:

<div>
  <iframe src="http://www.fdsa.com?ID=1">
</div>

or build it programatically:

document.getElementById("content-window").innerHTML='<iframe src="http://www.fdsa.com?ID=1">'

you could use more <iframe> information here:
https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe

enjoy!