Insert external page html into a page html

Question

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

Hello this is my webpage
You can see here an interresting infor         


        

Answer 1

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

1. Iframe -> this one is not so recommended

2. 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>

Answer 2

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

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

Answer 3

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