a full example of how to load a content page in an iframe and jump to a specific section of that page

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Example Page</title>
  </head>
  <body>
    
    <h2>Section 1</h2>
    <p>This is the first iframe:</p>
    <iframe id="iframe1" src="https://www.example.com"></iframe>

<h2>Section 2</h2>
    <p>This is the second iframe:</p>
    <iframe id="iframe2" src=""></iframe>

<p>Click the button to load the content page in the second iframe and jump to the section:</p>
    <button onclick="loadContentPage()">Load Content Page and Jump to Section 2</button>

<script>
      function loadContentPage() {
        // Get reference to the second iframe
        var iframe2 = document.getElementById("iframe2");

// Set the source of the second iframe to the content page with the desired section ID
        iframe2.src = "https://www.example.com/content-page.html#section2";
      }
    </script>
  </body>
</html>