JavaScript: Not able to get tagName on click

November 15, 2021

I want to get tagName of any element inside the iframe onclick. However, I’m not being able to do that. I’m new to JavaScript. Where am I wrong?

<div class="flex-child green">
    <p id="a">You clicked on: </p>
    <iframe
      id="zzz"
      srcdoc="<html><h1>hello</h1><button>click me!</button></html>"
      width="500"
      height="500"
      onload="clickfn()"
    ></iframe>
  </div>
</div>

<script>
  function clickfn() {
    x = document.getElementById("zzz").target.tagName;
    document.getElementById("a").innerHTML = x;
  }
</script>

<style>
  .flex-container {
    display: flex;
  }

  .flex-child.green {
    flex: 1;
  }
</style>

>Solution :

For the shown code (using srcdoc) you should be able to attach the event listener to the contentWindow of the iframe:

document.getElementById("zzz").addEventListener('load', iframeLoaded)

function iframeLoaded() {
  document.getElementById("zzz").contentWindow.addEventListener('click', function(e) {
    document.getElementById("a").innerHTML = e.target.tagName;
  })
}

.flex-container {
  display: flex;
}

.flex-child.green {
  flex: 1;
}

<div class="flex-child green">
  <p id="a">You clicked on: </p>
  <iframe id="zzz" srcdoc="<html><h1>hello</h1><button>click me!</button></html>" width="500" height="500"></iframe>
</div>

Whether this works or not depends on the security headers send by the server, here on StackOverflow it does not work. On jsfiddle.net it works.