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.