Gå til hovedindhold

Sådan løser du DSAR iframe blank skærm efter indsendelse

Rogelyn
Opdateret

Når du tilføjer Termlys DSAR-formular til dit websted, udfylder brugerne den inde i en iframe. Efter de trykker på Indsend, vises bekræftelsesmeddelelsen øverst i iframe'en. Hvis formularen er lang, kan brugerne stadig være nederst på siden og ikke se meddelelsen med det samme.

Her er en hurtig måde at løse dette på, så siden automatisk scroller op, og meddelelsen bliver synlig.

 

Sådan løser du det

Tilføj et enkelt JavaScript-kodeudsnit til dit site, som scroller siden tilbage til toppen af iframe'en, hver gang den genindlæses efter indsendelse.

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

<script>
  const iframe = document.getElementById('dsarForm');
  iframe.addEventListener('load', () => {
    // Scroll the parent page to the top of the iframe
    iframe.scrollIntoView({ behavior: 'smooth', block: 'start' });
  });
</script>

 

Sådan fungerer det

  • Indsend-knappen trykkes: Iframe'en genindlæses for at vise bekræftelsesmeddelelsen.
  • Load-event udløses: Scriptet registrerer genindlæsningen.

  • Scroll-handling: Forældresiden scroller blødt til toppen af iframe'en, så meddelelsen er synlig.

     

Nuværende begrænsninger

  • DSAR iframe-demoen inkluderer ikke en postWindow()-besked eller indbyggede event hooks til at underrette forældresiden om indholdsændringer.

  • Det betyder, at du ikke direkte kan opfange formularens tilstandsændringer fra iframe'en.

     

Noter

  • Denne løsning fungerer pålideligt i den nuværende DSAR-demoopsætning, hvor iframe'en genindlæses efter indsendelse.
  • Hvis din implementering bruger dynamisk indholdsindsprøjtning (uden fuld genindlæsning), kan load-eventet muligvis ikke blive udløst. I så fald kan en mere avanceret tilgang (såsom MutationObserver eller fremtidig support for postMessage) være nødvendig.

 

Næste skridt

Vi fortsætter med at undersøge mere robuste løsninger, der ikke kun er afhængige af iframe-genindlæsninger. I mellemtiden bedes du teste ovenstående kodeudsnit i dit miljø.

 

Relaterede artikler

Hvordan opsætter jeg en DSAR-formular til mine webstedsbesøgende?

Hvordan svarer jeg på en DSAR?

Hvordan integrerer jeg en Do Not Sell My Info-knap på et Wix-websted?