Me gustaría agregar una propiedad a la ventana de un iframe antes de que la página cargue su contenido. Me gustaría configurarlo para que los scripts cargados en la fuente tengan acceso a esa propiedad.
Como ejemplo, esto es lo que estoy tratando de hacer:
<!- index.html -> <body> <script type="module"> const iframe = document.createElement('iframe') iframe.src = 'about:blank' const onLoad1 = new Promise(res => iframe.onload = res) document.body.appendChild(iframe) await onLoad1 iframe.contentWindow.foo = 'something' console.log(iframe.contentWindow.foo) const onLoad2 = new Promise(res => iframe.onload = res) iframe.src = 'frame.html' // same origin await onLoad2 console.log(iframe.contentWindow.foo) // currently undefined </script> </body> <!- frame.html -> <script> console.log(window.foo) // currently undefined </script> Me doy cuenta de que contentWindow es una nueva Window porque reasignar la propiedad src desencadena una nueva carga de página.
Tenía la esperanza de que viajar desde about:blank a una misma ruta de origen me otorgaría poderes especiales que persisten en las propiedades establecidas en la window pero ese no fue el caso.
Actualmente (lo que estoy tratando de evitar), estoy recurriendo a emitir un evento personalizado y capturarlo de forma asíncrona dentro del marco. Este es un baile engorroso y no es ideal para situaciones en las que los valores deben conocerse sincrónicamente.
<!- index.html -> <body> <script type="module"> const iframe = document.createElement('iframe') iframe.src = 'frame.html' const onLoad1 = new Promise(res => iframe.onload = res) document.body.appendChild(iframe) await onLoad1 function sendValue() { iframe.contentWindow.dispatchEvent( new CustomEvent('custom:onload', { detail: 'foo' })) } iframe.contentWindow.addEventListener('custom:request:onload', sendValue) sendValue() </script> </body> <!- frame.html -> <body> <script async type="module"> const onfoo = new Promise( res => window.addEventListener('custom:request:onload', e => res(e.detail)) window.dispatchEvent(new CustomEvent('custom:request:onload')) </script> </body>