Java-Scripts.net

Javascript AJAX IFrame Script

Upgrade your user experience with dynamic content. This script allows you to load external pages into an IFrame asynchronously, enabling part of your webpage to update without requiring a full page reload.

Dynamic Content Demo

Copy the Script

<!-- The IFrame -->
<iframe id="contentArea" name="contentArea" width="100%" height="300"></iframe>

<!-- Trigger Link -->
<a href="newpage.html" target="contentArea">Load New Page</a>

<script>
  // Optional JS to handle the loading state
  var myFrame = document.getElementById("contentArea");
  myFrame.onload = function() {
      console.log("New content has loaded into the IFrame.");
  };
</script>

Frequently Asked Questions

Yes, as long as the target website does not use 'X-Frame-Options' to block framing. For your own internal pages, this works perfectly for creating a seamless dashboard.

You can set allowtransparency="true" on the IFrame tag and ensure the background-color of the body in the page being loaded is set to transparent in CSS.

Yes, you can use the CSS property overflow: hidden; on the IFrame or set the attribute scrolling="no", though the latter is deprecated in HTML5.