SaigonTech Vault
Loại: knowledge-doc 2026-09-29 active #wiki-import

How to access element in iframe with JS

Description

  • You have a website with domain: https://example.web.com
  • A iframe link: https://example.iframe.com
  • Goal: Implement actions in the iframe like clicking a button, displaying text, uploading file,... by button outside the iframe.

To access a element in iframe you need add a script for iframe.

  • In iframe source code, you need add a script to allow your website pass event to this iframe.
  • Document: here
  • Example:
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
  <title>Iframe Example</title>
</head>

<body>
  <input id="update_file" type="file" accept="image/*" style="display:none;" />
  <img id="previewImage" src="#" alt="Preview Image" style="display: none; max-width: 100%; max-height: 200px;">

  <script>
    window.addEventListener('message', event => {
      if (event.origin === 'https://example.web.com') {
        // The data was sent from your site.
        // Data sent with postMessage is stored in event.data:
        console.log(event.data);
        if(event.data === 'upload_file') {
            document.getElementById('update_file').click();
        }
      } else {
        // The data was NOT sent from your site!
        // Be careful! Do not use it. This else branch is
        // here just for clarity, you usually shouldn't need it.
        return;
      }
    });
  </script>

</body>

</html>

And in your web code

  • You can use the postMessage() function to send event to the iframe.
  • Document: here
  • Example:
<html>
<head>
    <style>
        #myIframe {
            height: 600px;
            width:1000px;
            border: 2px solid #999;
        }
        .main {
            display: flex;
            flex-wrap: wrap;
        }
        #myButton {
            margin:20px;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="col1">
        <iframe id="myIframe" src="https://example.iframe.com/"></iframe>
    </div>
    <div class="col1">
        <button id="myButton" onclick="triggerClickInsideIframe()">Button outside</button>
    </div>
</div>
<script>
    function triggerClickInsideIframe() {
        document.getElementById("myIframe").contentWindow.postMessage('upload_file', 'https://example.iframe.com');
    }
</script>
</body>
</html>

Why you can't access element in iframe when domains is difference?

  • The Same-Origin Policy prevents JavaScript from accessing content in an iframe if the iframe is loaded from a different domain, protocol, or port than the parent page. This means you cannot directly manipulate or interact with elements inside an iframe if it is cross-origin.

    Example:

    If your main page is hosted at https://example.com and the iframe loads content from https://another-domain.com, any attempt to access elements within that iframe using JavaScript will result in a security error.