Insert external page html into a page html

Question

I'd like to load/insert an external html page into my web page. Example :

<b>Hello this is my webpage</b>
You can see here an interresting information :

XXXX

Hope you enjoyed

the XXXX should be replaced by a small script (the smaller as possible) that load a page like http://www.mySite.com/myPageToInsert.html

I found the following code with jquery :

<script>$("#testLoad").load("http://www.mySite.com/myPageToInsert.html");</script>    
<div id="testLoad"></div>

I would like the same without using an external javascript library as jquery...

score 7 · Accepted Answer · edited May 23 '15 at 07:37

7

There are 2 solutions for this (2 that I know at least):

Iframe -> this one is not so recommended
Send an ajax request to the desired page.

Here is a small script:

<script type="text/javascript">

function createRequestObject() {
    var obj;
    var browser = navigator.appName;
    if (browser == "Microsoft Internet Explorer") {
        obj = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        obj = new XMLHttpRequest();
    }
    return obj;
}

function sendReq(req) {   
    var http = createRequestObject();
    http.open('get', req);
    http.onreadystatechange = handleResponse;
    http.send(null);
}

function handleResponse() {    
    if (http.readyState == 4) {
        var response = http.responseText;
        document.getElementById('setADivWithAnIDWhereYouWantIt').innerHTML=response;
    }
}

 sendReq('yourpage');
//previously </script> was not visible
</script>

edited May 23 '15 at 07:37

Nickolaus

4,582
4
34
58

answered Feb 11 '11 at 10:02

zozo

7,359
17
66
118

getting this error: Uncaught ReferenceError: http is not defined – jisu Jul 23 '14 at 21:18
1

had to add this list to make it work: http = createRequestObject() – jisu Jul 23 '14 at 21:25
1

is this up to date? – bysanchy Aug 02 '16 at 03:21
Should still work fine if you need only that and you don't want to include any libs. Although js libs evolved a lot since then so I would suggest using jQuery ajax instead since it provides more flexibility (5 years ago you could have many reasons not to use a lib... now... eh... not so much; internet evolved to the point where the 100k of the lib is not a tragedy to load and most conflicts between different libs are known and pointed out or fixed). – zozo Aug 02 '16 at 07:06

score 4 · Answer 2 · answered Feb 11 '11 at 09:59

4

Would an iframe fit the bill?

<b>Hello this is my webpage</b>
You can see here an interresting information :

<iframe id="extFrame" src="http://www.mySite.com/myPageToInsert.html"></iframe>

Hope you enjoyed

You can set the src attribute of your iframe element using plain old javascript to switch out the page for another

answered Feb 11 '11 at 09:59

Phil Jenkins

4,341
1
25
22

Thx, I didn't think about iframe because it's sometimes problematic on some web site... But I should reconsider it. – Zitun Feb 11 '11 at 10:07

score 0 · Answer 3 · edited May 23 '17 at 11:54

0

I think what you are looking for are in the Jquery source code.

you can see more details here $(document).ready equivalent without jQuery

edited May 23 '17 at 11:54

Community

1
1

answered Feb 11 '11 at 10:01

VP.

5,004
6
42
69

Insert external page html into a page html

3 Answers3

Linked