Quiero obtener tagName de cualquier elemento dentro del iframe al hacer onclick . Sin embargo, no estoy siendo capaz de hacer eso. Soy nuevo en JavaScript. ¿Dónde estoy equivocado?
<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>Para el código que se muestra (usando srcdoc ), debería poder adjuntar el detector de eventos a la contentWindow de contenido del 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>Si esto funciona o no depende de los encabezados de seguridad enviados por el servidor, aquí en StackOverflow no funciona. En jsfiddle.net funciona.