Adding page in a certain space of my homepage

Question

This is my first question on stackoverflow.

I want to load a different page in a certain space of my homepage. I tried it with JavaScript many times but hitting a wall. I can do it with iframe. But I was thinking if there is any other way to do it. And I want to load the page when the user clicks the link.

The way I did it is like this:

document.getElementById('aboutUs').onclick = function() {

        document.getElementById('newDiv').style.display = "none";
        document.getElementById('iFrame').style.display = "block";
    }

Thank You!!!

I want to load another page in a certain space of my homepage when the user click "about us" link. without loading the whole index page. The way I did it it loads the about us page when the browser loads index page — ramzan00, Sep 10 '16 at 05:54
Not sure but it sounds like you want to use `ajax`. There is a question here - [What is AJAX, really?](http://stackoverflow.com/questions/958040/what-is-ajax-really) - which might help. — Tigger, Sep 10 '16 at 05:58
Ok, I think I know what ajax is, but it would be trouble for me to use it now. I think I have to see if there's any other way around. — ramzan00, Sep 10 '16 at 06:01

score 0 · Accepted Answer · answered Sep 10 '16 at 06:03

You need to make request to load the static content.

Hope this snippet will be useful

//A generic function to load the static page
function loadContent(target, staticPageLoc) {
  var r = new XMLHttpRequest(); // making request to load the static page
  r.open("GET", staticPageLoc, true);
  r.onreadystatechange = function () {
    if (r.readyState != 4 || r.status != 200) return;
    target.innerHTML = ""; // removing any previous content
    target.innerHTML = r.responseText; // response will be the static page
  };
  r.send();
}

document.getElementById('aboutUs').onclick = function() {
   loadContent(document.getElementById('id of dom element where page will load'), 'page path')
}

Alternately you can explore jquery.load function & better to run it in a server or else you may come across CORS

Adding page in a certain space of my homepage

1 Answers1