Tabla de contenido

fondo

En el desarrollo diario, encontraremos una situación en la que la página necesita anidar el iframe, porque el iframe no puede adaptarse a la altura del estilo en el interior, por lo que debemos monitorear la altura dinámica del iframe.

Método para realizar

MutaciónObservador

Ideas de implementación

Definir el observador MutationObserver
Escuche el evento DOMContentLoaded de la ventana de contenido del iframe (cuando el documento HTML inicial está completamente cargado y analizado)
Cuando contentWindow.document.readyState del iframe es interactivo (lo que representa que el documento ha sido analizado, cargando recursos de estilo, etc.) comience a monitorear observer.observe(iframeEle.contentWindow.document, options);
El dom dentro del iframe se actualiza dinámicamente y el observador captura el cambio del dom. En este momento, puede obtener contentWindow.document.body.scrollHeight y asignar la altura al elemento exterior del iframe

Código de implementación

No hay mucho que decir, solo ve al código

El iframe que necesita ser monitoreado

<iframe id="iframeId" src="xxxxx"></iframe>

let iframeEle = document.getElementById('iframeId');

// 配置监听方法的属性值
const options = {
    "childList" : true,
    "attributes" : false,
    "characterData" : false,
    "subtree" : true,
    "attributeOldValue" : false,
    "characterDataOldValue" : false
};
// 定义一个监听器
var observer = new MutationObserver((mutations) => {
      let is_dom_change = false;
      mutations.forEach((item) => {
        if (item.type === 'childList') {
          is_dom_change = true;
        }
      });
      const scrollHeight = iframeEle.contentWindow.document.body.scrollHeight;
      if (is_dom_change) {
        iframeEle.style.height = `${scrollHeight}px`;
      }
});


iframeEle.contentWindow.addEventListener('DOMContentLoaded', function(e) {
    try {
        if (iframeEle.contentWindow.document.readyState === "interactive") {
            // 传入监听的dom，以及配置
            observer.observe(iframeEle.contentWindow.document, options);
        }
    } catch (err) {}
});

escena extendida

Cuando cambia el enlace interno del iframe, o el backend o la puerta de enlace redirige la página, ¿cómo obtener el último href en el iframe?

Alguien podría decir usar el método onload, por ejemplo

<iframe onload="handleOnload" id="iframeId"></iframe>

<script>
handleOnload(e) {
    console.log('触发了onload事件');
}
</script>

Pero en el uso real, encontrará que el evento de carga del iframe solo se activará una vez en un momento determinado.

Para esto, podemos monitorear el método de carga del iframe y comenzar a monitorear después de que el iframe se cargue por primera vez para garantizar la solidez del código.

let iframeId = document.getElementById("iframeId")


iframeEle.contentWindow.addEventListener('DOMContentLoaded', function(e) {
    try {
        if (iframeEle.contentWindow.document.readyState === "interactive") {
            iframeId.addEventListener("load", function(e) {
                // 拿到iframe内部最新的href
                console.log(iframe.contentWindow.location.href)						
            });
        }
    } catch (err) {}
});

documentos de referencia

" DOMContentLoaded - Referencia de la interfaz API web | MDN "

《document.readyState - Referencia de la interfaz API web | MDN》

" MutationObserver - Referencia de la interfaz API web | MDN "

[JavaScript] Supervise dinámicamente la altura del iframe y el salto del enlace interno del iframe