Estoy usando el paquete iframe-resizer para cambiar dinámicamente el tamaño de un iframe según el contenido.

Sin embargo, incluso antes de intentar cualquier cambio de tamaño dinámico, me encuentro con un problema con el iframe básico: siempre 300px ancho de 300 px. Independientemente del contenido que coloque dentro del iframe, el ancho siempre es de 300 px. no se moverá; el desbordamiento está oculto si agrego algo> 300px y aún ocupa 300px si mi contenido es más pequeño que eso.

EDITAR: para ser claros, mi problema es que quiero cambiar dinámicamente el ancho de un iframe (dominio cruzado), pero siempre se muestra a 300 px y no cambiará. Estoy usando el paquete iframe-resizer para cambiar dinámicamente con éxito la altura, pero eso no es para trabajar en el ancho.

En el sitio principal, incrusto el iframe de la siguiente manera:

 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.2.11/js/iframeResizer.min.js"> </script> <script type="text/javascript"> var i = new URLSearchParams(window.location.search).get("openWidget"); document.write('<iframe id="inlineFrameExample" title="Inline Frame Example" style="position: fixed; zIndex: 1000; bottom: 0; right: 0" frameBorder="0" scrolling="no" src="http://localhost:3001?openWidget=' + i + '"></iframe>'); window.iFrameResize({ log: true }, '#inlineFrameExample') </script>

Y el contenido en mi para mi sitio enmarcado, tengo los siguientes elementos y estilo:

 <div className="App" id="App2"> {openWidget && <div className="button">OK</div>} {showMessage && <section>This is a message</section>} <div> <button className="button" onClick={() => setShowMessage(!showMessage)}> Msg </button> <button className="button" onClick={() => setOpenWidget(!openWidget)}> {openWidget ? "-" : "+"} </button> </div> </div> .App { text-align: center; float: right; } .container { display: flex; justify-content: flex-end; float: right; } section { background-color: mediumseagreen; color: white; width: 500px; } .button { width: 100px; height: 100px; background-color: mediumseagreen; color: white; text-align: center; float: right; }

Tenga en cuenta que no hay nada allí sobre el ancho de 300px. Hay otros anchos, pero el iframe parece ignorarlos y siempre se establece en 300 px.

También hice dos cajas de arena de código e incrusté un sitio en el otro a través de un iframe. Desafortunadamente, el iframe está oculto por alguna razón, pero si inspecciona y busca el iFrame con id="inlineFrameExample" (y no el iframe del botón de code sandbox), verá que tiene 300 px de ancho: https://exzts.csb.app/ El código para el sitio principal está aquí:https://codesandbox.io/s/eloquent-flower-exzts?file=/index.html El código para el sitio enmarcado está aquí: https://codesandbox.io/s/ iframe-prueba-ss8fs

ACTUALIZACIÓN: también eliminé todos los estilos css tanto del sitio principal como del sitio enmarcado. Todavía siempre atascado en 300px. También vi las especificaciones de CSS que dicen que el valor predeterminado será de 300 px bajo ciertas condiciones, pero no puedo entender cómo no cumplir con esas condiciones para que la regla de 300 px no se aplique.

Quiero que el iframe cambie de tamaño según el ancho. La configuración actual funciona perfectamente en altura, y entiendo que hay algo en las especificaciones predeterminadas para iframes que los establece en 300 px si se cumplen las condiciones x: w3.org/TR/CSS2/visudet.html#inline-replaced-width Lo que yo la necesidad es cualquier estilo/configuración/atributo que deshabilite esto, por lo que el ancho actuará de la misma manera que el alto (es decir, completamente dinámico).