Aller au contenu principal

Comment résoudre l'écran blanc de l'iframe DSAR après soumission

Rogelyn
Mise à jour

Lorsque vous ajoutez le formulaire DSAR de Termly à votre site web, les utilisateurs le remplissent à l'intérieur d'une iframe. Après avoir cliqué sur Soumettre, le message de confirmation s'affiche en haut de l'iframe. Si le formulaire est long, les utilisateurs peuvent encore se trouver en bas de la page et ne pas voir le message immédiatement.

Voici une méthode rapide pour résoudre ce problème afin que la page défile automatiquement vers le haut et que le message soit visible.

 

Comment le résoudre

Ajoutez un simple extrait de JavaScript à votre site qui fait défiler la page vers le haut de l'iframe chaque fois qu'elle se recharge après la soumission.

<iframe id="dsarForm" src="https://app.termly.io/dsar/UUID"></iframe>

<script>
  const iframe = document.getElementById('dsarForm');
  iframe.addEventListener('load', () => {
    // Faire défiler la page parente vers le haut de l'iframe
    iframe.scrollIntoView({ behavior: 'smooth', block: 'start' });
  });
</script>

 

Comment ça marche

  • Bouton Soumettre pressé : L'iframe se recharge pour afficher le message de confirmation.
  • Événement de chargement déclenché : Le script détecte le rechargement.

  • Action de défilement : La page parente défile en douceur vers le haut de l'iframe, garantissant que le message est visible.

     

Limitations actuelles

  • La démo de l'iframe DSAR n'inclut pas de message postWindow() ni de hooks d'événements intégrés pour notifier la page parente des changements de contenu.

  • Cela signifie que vous ne pouvez pas intercepter directement les changements d'état du formulaire depuis l'iframe.

     

Notes

  • Cette solution fonctionne de manière fiable dans la configuration actuelle de la démo DSAR, où l'iframe se recharge après la soumission.
  • Si votre implémentation utilise une injection de contenu dynamique (sans rechargement complet), l'événement load peut ne pas se déclencher. Dans ce cas, une approche plus avancée (comme MutationObserver ou un support futur pour postMessage) pourrait être nécessaire.

 

Étapes suivantes

Nous continuons d'explorer des solutions plus robustes qui ne dépendent pas uniquement des rechargements d'iframe. En attendant, veuillez tester l'extrait ci-dessus dans votre environnement.

 

Articles connexes

Comment configurer un formulaire DSAR pour les visiteurs de mon site web ?

Comment répondre à une DSAR ?

Comment intégrer un bouton Ne pas vendre mes infos sur un site Wix ?

Articles associés