Dynamic IFrame Loader
Upgrade your user experience with dynamic content. This script allows you to load external pages into an IFrame asynchronously, enabling specific sections of your webpage to update without requiring a full page reload.
Live Demo
Content loads inside the box above without refreshing this page.
Copy the Script
<!-- 1. The Container IFrame -->
<iframe id="contentArea" name="contentArea" width="100%" height="300" frameborder="0"></iframe>
<!-- 2. The Trigger Link -->
<!-- The 'target' attribute tells the browser to load this link inside the iframe -->
<a href="newpage.html" target="contentArea">Load New Page</a>
<!-- 3. Optional: JavaScript to handle load events -->
<script>
var myFrame = document.getElementById("contentArea");
myFrame.onload = function() {
console.log("New content has finished loading.");
};
</script>Frequently Asked Questions
Traditional AJAX uses the XMLHttpRequest object or Fetch API. This script uses an IFrame as a transport layer, which is often simpler to implement for loading entire HTML pages or cross-domain content (where allowed).
Yes. You can add a JavaScript function that listens for the 'onload' event of the IFrame and adjusts its 'height' property to match the 'scrollHeight' of the contained document.
Because the content is loaded dynamically, the main parent page remains static. However, the external pages being loaded into the IFrame are still fully indexable by search engines on their own URLs.