ramzan00 ramzan00 - 1 month ago 4x
Javascript Question

Adding page in a certain space of my homepage

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!!!


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

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