Access Iframe Document Element Javascript

tcvduc 0
Viewed 28
  • Hi, I was working on the Iframe and then I stuck on a problem.
  • I want to access the Iframe's elements, but I can't.
  • I use the iframe.contentWindow.document.getElementsByClassName("element") to access.
  • Here is my code

  • On 10.html file

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Onboard Access Iframe Elements</title>
  <link rel="stylesheet" href="./10.css" />
</head>
<body>
  <div class="layer">
    <div class="iframe-container">

      <!-- I wanted to access the element inside the iframe bellow  -->
      <iframe
        class="iframe-element"
        height="100%"
        width="100%"
        src="./iframe.html"
        frameborder="0"
      ></iframe>
    </div>
  </div>
  <script src="./10.js"></script>
</body>

  • On iframe.html file

      <!DOCTYPE html> <html lang="en">   <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML For Iframe</title>

  <style>
    body {
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .element {
      font-size: 24px;
    }
  </style>   </head>   <body>
  <div class="element element1">1</div>
  <div class="element element2">2</div>
  <div class="element element3">3</div>
  <div class="element element4">4</div>
  <div class="element element5">5</div> 
  </body> 
  </html>

  • On 10.js file

    (function () {
const classes = {
  iframeElement: "iframe-element",
};

/**
 *
 * @param {HTMLIFrameElement} iframe
 */
function getIframeElements(iframe) {
  console.log(
    iframe.contentWindow.document.getElementsByClassName("element")
  );
}

function main() {
  const iframeElement = document.getElementsByClassName(
    classes.iframeElement
  )[0];

  getIframeElements(iframeElement);
}

main();
})();

  • On 10.css file

    * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.layer {
width: 100%;
height: 100vh;
background-color: blanchedalmond;
display: flex;
justify-content: center;
align-items: center;
}

.iframe-container {
width: 500px;
height: 300px;
border: 5px solid #000;
}
  • From an HTML, Is there any way to access the Iframe's Elements?
  • Thank you guys very much!
iframe javascript html
1 Answers

Wait for iframe to load before you can access it's dom. Call getIframeElements inside load event of iframe.

Something like this

 iframeElement.addEventListener("load", () =>
      getIframeElements(iframeElement)
 );
Amit Kumar0
Related