Tengo un código que se puede reducir a esto:
<script> function write_to_iframe(){ let nw = document.getElementById("mysrc"); let myframe = document.getElementById("myframe"); myframe.contentWindow.document.body.innerHTML = nw.innerHTML; } </script> <iframe id="myframe" width="230" height="95"></iframe> <div id="mysrc"> <script> function hello(){ alert("hello world"); } </script> <a href="#" onclick="hello(); return false;">SayHello</a><br> </div>Escribe el código en el div al iframe. Esa parte parece funcionar. Sin embargo, cuando hago clic en el enlace SayHello en el iframe, aparece un error de JavaScript que indica que no se puede encontrar la función hello().
¿Qué está fallando aquí? ¿Y cómo puedo declarar una función de javascript en línea en el marco que funciona?
No estoy interesado en archivos javascript externos o código que ponga todo en el enlace (como onclick="javascript:alert('hi');").
Reconsideraría usar un iframe con innerHTML e intentar llamar a una función en el documento principal desde él. El soporte puede variar en diferentes navegadores, el acceso de iframes a su padre es muy limitado. Si ambas cosas están en el mismo dominio, entonces no rompe la política de CORS y puede hacer más, pero aún hay mejores opciones.
Si insiste en usar iframe, consideraría crear una ruta externa para él (mismo dominio), ej. iframe/embed.html coloque HTML allí normalmente, luego cambie la ubicación después de hacer clic en iframe/embed.html#callHello . Y en el documento principal agregaría eventListner para detectar el cambio de ubicación.
const iframe = document.getElementById("iframeId"); window.open("https://example.com/iframe/embed.html", "iframeId"); iframe.addEventListener("load", () => { if (iframe.contentWindow.location.href.includes('#callHello')) { hello(); } });