C load new web page on button click

Here is an example of how you can load a new web page on a button click using HTML, CSS, and JavaScript:

HTML:

<button id="load-new-page-btn">Load New Page</button>

<!-- The new page will be loaded into this div -->
<div id="new-page-container"></div>

CSS:

#new-page-container {
  width: 800px;
  height: 600px;
  border: 1px solid #ccc;
  padding: 20px;
}

JavaScript:

const loadNewPageBtn = document.getElementById('load-new-page-btn');
const newPageContainer = document.getElementById('new-page-container');

loadNewPageBtn.addEventListener('click', () => {
  // Load the new page
  const newPageUrl = 'https://www.example.com/new-page'; // Replace with the URL of the new page
  newPageContainer.innerHTML = '';
  const iframe = document.createElement('iframe');
  iframe.src = newPageUrl;
  iframe.width = '100%';
  iframe.height = '100%';
  newPageContainer.appendChild(iframe);
});

In this example, we first get references to the button and the div that will contain the new page. We then add an event listener to the button that listens for a click event. When the button is clicked, we clear the contents of the div, create a new iframe element, set its source to the URL of the new page, and append it to the div.

You can also use the window.location object to load a new page, like this:

loadNewPageBtn.addEventListener('click', () => {
  window.location.href = 'https://www.example.com/new-page';
});

This will load the new page in the current window, rather than in an iframe.

You can also use the fetch API to load the new page, like this:

loadNewPageBtn.addEventListener('click', () => {
  fetch('https://www.example.com/new-page')
   .then(response => response.text())
   .then(html => {
      newPageContainer.innerHTML = html;
    });
});

This will load the new page as HTML and then set the innerHTML of the div to the loaded HTML.