0
214
Views¿Cómo puedo hacer que el depurador de secuencias de comandos de Chrome llegue al punto de interrupción al cargar <iframe>?
Estoy tratando de entender cómo iframe llama a la URL especificada en su atributo src. Cuando miramos la pestaña de red en las herramientas para desarrolladores de Chrome, la columna Tipo se muestra como "documento".
Considere el siguiente fragmento HTML
<!DOCTYPE html> <html> <body> <h1>The iframe element</h1> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3549.400553850174!2d78.03995351513306!3d27.175144783015277!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39747121d702ff6d%3A0xdd2ae4803f767dde!2sTaj%20Mahal!5e0!3m2!1sen!2sin!4v1660205543740!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </body> </html>
En el caso de la API de búsqueda, el tipo se ve como búsqueda. 
De manera similar, cuando hacemos xmlHTTPRequest() el tipo es xhr.
Entonces, tengo las siguientes preguntas:
- ¿Qué indica el tipo "documento" en caso de iframe?
- ¿Qué método JS nativo usa iframe para cargar la URL en su atributo src?
- Dado que no puedo usar el punto de interrupción xhr, ¿cómo agregar un punto de interrupción en las herramientas de desarrollo de Chrome antes de que se invoque la URL en el atributo src de iframe (no estoy seguro de si esa es la terminología correcta aquí)?
2 answers
Answer question0
¿Qué indica el tipo "documento" en caso de iframe?
Que la URL apunte a un documento (en este caso HTML).
¿Qué método JS nativo usa iframe para cargar la URL en su atributo src?
Ninguna.
Los navegadores proporcionan API para permitir que las páginas web ejecuten JavaScript en una página e interactúen con el navegador de varias maneras.
Suelen no estar escritos en JavaScript ni utilizarlo para la mayoría de sus operaciones internas. (C++ es más común).
0
¿Qué indica el tipo "documento" en caso de iframe?
Que el navegador solicitó un documento HTML para mostrarlo en una ventana del navegador orientada al usuario, tal como lo hizo Netscape 1.0 en su día.
¿Qué método JS nativo usa iframe para cargar la URL en su atributo src?
- No hay JavaScript involucrado. Ni "Native JS" (lo que sea que eso signifique...) .
- Pero supongo que cualquier código involucrado está en algún lugar aquí: https://github.com/chromium/chromium/tree/main/net/http
Dado que no puedo usar el punto de interrupción xhr, ¿cómo agregar un punto de interrupción en las herramientas de desarrollo de Chrome antes de que se invoque la URL en el atributo src de iframe (no estoy seguro de si esa es la terminología correcta aquí)?
Hay dos opciones, y puede usar ambas juntas:
- La API de tiempos de navegación y recursos en el DOM es compatible con la mayoría de los navegadores.
- Básicamente, tiene un
<script>en la parte superior de su<head>que escucha los eventos de inicio denavigationStartque aumentan el DOM, y puede colocar un punto de interrupción allí si lo desea. - https://developer.mozilla.org/en-US/docs/Web/Performance/Navigation_and_resource_timings
- Básicamente, tiene un
- Los "puntos de interrupción del detector de eventos" integrados en Chrome Developer Tools.
Vaya a la pestaña Fuentes y abra la lista de la derecha para seleccionar los eventos "Cargar" y "Ventana" de nivel superior. Una vez marcado, el depurador se interrumpirá cuando cualquier iframe en el documento actual genere cualquiera de esos eventos (especialmente
loadynavigate).Al igual que:
