Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

97
Vistas
Trigger function on iframe when fetch request by parent window is completed

From an iframe, is there a way to trigger a function when a fetch made by the parent is completed?

The issue in detail:

On a website, I'm running an external script in Google Tag Manager (which I don't control) that fetches a set of tracking tags. The script places the tags in hidden fields on a form on the parent page by default. However I want them carried over to hidden fields on an iframed Hubspot form on that page. And I don't want to block the form itself from loading.

I've added placeholder hidden fields on the parent page to catch the fetched values. On the Hubspot forms.create method, I've set the onFormReady listener to run a function to get the values from the placeholder fields, and place them in the hubspot form fields.

This doesn't always work, since onFormReady may fire before the values are fetched and added to the placeholder fields. So the function put empty string into the framed form fields.

Overwriting the fetch request from within the onFormReady listener didn't work. I came across this answer, suggesting using a performance observer, which did work for me. My form embed code now looks like below.

As mentiond, it works, but feels like it abuses the performance observer for something it wasn't meant for, and therefor isn't very robust? I'm curious if there is a better solution for this.

<script>
hbspt.forms.create({
    //some Hubspot form properties here
    onFormReady: function(form) {
        if (!document.querySelector('input[name="UtmSource"]').value) {
            const observer = new PerformanceObserver((list) => {
                for (const entry of list.getEntries()) {
                    if (entry.initiatorType === 'fetch' && entry.name.includes('https://whatever.com')) {
                        addTagsToForm();
                    } 
                } 
           });
            observer.observe({
            entryTypes: ['resource']
            });
        } else {
            addTagsToForm();
        };
        
        function addTagsToForm() {
        // function to grab values from placeholder fields on parent and add to iframed fields here
            }
        }
    }
});
</script>
about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda